1. Update the HTML files to do the following:

a. Modify the link to the external style sheet to reference portfoliostyles05 css.

b. Add the viewport meta tag to the head section.

c. Delete the height and width attributes from all img tags.

2. Update the CSS file to do the following:

a. Measure all width properties in percentages (%).

b. Add styles to create exible images.

c. Determine the most essential content on each page and style the HTML elements for a mobile viewport.

d. Remove the markers (bullets) from the list items in the nav area.

e. Refine your style sheet as desired to add margins and padding using em units of measure.

f. Add a comment to note where the mobile styles begin.

Tablet

Desktop

The code for external style sheet is as below

/* NAME - S

DATE - 26/02/2021 */

body {

font-family: Arial, Helvetica, sans-serif;

background: gray;

color: white;

text-align: center;

padding-top: 100px;

}

/* This will deisplay the content of Mobile class only.

The width of Tablet is around 768 pixels. */

/* Tablet */

@media(min-width: 501px) and (max-width: 769px) {

/* The desktop class will be hidden once the screen width is between 501 pixel to 769 pixel and background color will be Blue */

body {

background: blue;

}

.desktop{

display: none;

}

}

/* This will deisplay the content of Desktop class only.*/

/* Desktop */

@media(min-width: 769px) {

/* The mobile class will be hidden once the screen width is more than 769 pixels and background color will be Green */

body {

background: green;

}

.mobile {

display: none;

}

}

/* If the screen size is of smartphone i.e. below 500 pixels none of the class will be visible */

@media(max-width: 500px){

body {

background:grey;

}

.mobile, .desktop{

display: none;

}

}