Use the following HTML structure to create a page. You can fill up the page with ANY content that you like. But you need to maintain the HTML structure and use all HTML tags in this structure. You are allowed to add more HTML tags.

*

• 
  

• 
  

• 5

Step 1: Add a media query (3 pt)

In this step, youll add a media query to the page so it provides for tablets in portrait orientation. When youre done, the page will look different when the width of the browser window is reduced.

2. Add a meta element to the HTML that sets the width property for the viewport to the device width and the initial zoom factor to 1.
4. Code a media query for the screen media type that has a maximum width of 850 pixels.
6. Within the media query, change the base font size for the page so its 90% of the default font size.

Step 2 Create a fluid layout and scalable images. When youre done, the page will change its look when the width of the browser window is reduced. (4 pt)

2. Reduce the width of the browser window so its less than the width of the page. That way, youll be able to see how the page changes as you adopt a fluid design.
4. Modify the CSS for the body so it takes up 98% of the browser window and so its maximum width is the current width.
6. Set the widths of the section, the aside, and the li elements within the navigation menu to percentages.
8. Set any left or right margins or padding to percentages. (Hint: If any measurements are specified in ems, you can set them to pixels by multiplying by 16 since thats the base font size.)
10. Make the image in the article scalable so its always 50 percent of the width of the article.

Step 3: Format the home page for printing (3 pt)

2. In the HTML file, add a link element for the print.css file and be sure to specify that the medium is print.
4. In the CSS file, delete all of the rule sets and rules that you dont need to override, and code the rule sets or rules that will stop the display of the navigation menu and the images in the sidebar.
6. Increase the font size in the body element to 100% so the page will be easier to read when its printed.
8. Modify or add styles to the home_print.css file until the printed page looks like the one below.
10. Add CSS code developed in this section to the JSBin CSS tab and comment the code out after

this line

/* print.css */

I would also encourage you to do these two steps,

• Follow CSUN Identity Guideline for your CSS to maintain a consistent styling for similar elements in this assignment. https://www.csun.edu/identity/design-guidelinesLinks to an external site.
• Use a Google Font by using Google Fonts API https://developers.google.com/fonts/docs/getting_started