Task $2$: Go to the code$5-1.$html file and within the head section insert link elements linking the page to the code$5-1\_$layout.css and code$5-1\_$media.css files.

Task $3$: Add a viewport meta tag to the document head to set the width of the layout viewport equal to the width of the device and set the initial scale of the viewport to $1\mathrm{.}0.$

Open code$5-1\_$media.css file and create a media query for devices with a maximum width of $500$ pixels. Within the query do the following:

Set the display of the img element within the article element to none.

Center the text contained within the ul element belonging to the submenu class.

Task $4$: Create a media query for devices with a maximum width of $500$ pixels.

Create a media query for devices with a minimum width of $501$ pixels. Within the query do the following:

Float the nav element on the left page margin.

Set the width of the nav element to $130$ pixels and the height to $400$ pixels.

Set the top margin of the nav element to $30$ pixels, the right margin to $25$ pixels, and the bottom and left margins to $0$ pixels.

Task $5$: Create a media query for devices with a minimum width of $501$ pixels.

Create a media query for devices with a minimum width of $710$ pixels. Within the query do the following:

Set the float property of the nav element to none, its width to $100\%$ and its height to auto. Set the nav element margins to $0.$

Set the display of ul elements of the mainmenu class to flex with the flex flow in the row direction with no wrapping; justify the contents of the flexbox in the center.

Set the flex property of li elements with the ul$.$mainmenu element to have a growth factor of $0,$ a shrink factor of $1,$ and a basis value of $120$ pixels.

Task $6$: Create a media query for devices with a minimum width of $710$ pixels.

View the page under different screen widths, verifying that the menu format changes as the screen width changes as shown in Figure $557.$