In this exercise, you will design a webpage for a mobile viewport. An example of the completed webpage is shown in Figure 5-65.

1.Open the index.html file and update the comment with your name (firstname lastname), the file name, and todays date (MM/DD/YYYY).

Link the index.html file to the styles.css style sheet, located in the css subfolder. Open the file in Google Chromes device mode to display the page in a mobile viewport.

2. In the index.html file, add a class attribute with the value tablet-desk to the second div element within the main element.

3. In styles.css, below the body style rule, create a new style rule for the img selector the sets a maximum width of 100% and sets the display value to block.

4. Add two blank lines after the img style rule, add a comment with the text, Style rules for mobile viewport.

Add two blank lines after the mobile viewport comment, add another comment with the text, Style rule to hide tablet-desk class, and then create a style rule that hides the tablet-desk class.

5 .Add the following declarations to the nav style rule:

Specify a sticky position compatible with all modern browsers. (Hint: Use two position declarations and include the -webkit- prefix for the first declaration.)

Specify a top property value of 0px.

Add a declaration to the nav ul style rule that removes the bullet marker.

Add a declaration to the nav li style rule that sets the display to an inline-block.

6. After the main style rule, create a style rule for the corner class that specifies a border radius of 12px.

7. Open fonts.google.com in your browser, search for and select the B612 and Crimson Pro fonts. Copy and paste the link element provided by Google Fonts within the headelement in the index.html file.

In the styles.css file, update the following style rules:

Update the nav li style rule to use the B612 Google Font.

Update the main style rule to use the Crimson Pro Google Font.

Responsive Design Fluid Layout A fluid layout automatically adjusts its design based on the sire of the viewport. Responsive Images Reponsive images grow and shrink with the size of the viewport. Media Queries Use media eueries to stvle content for Responsive Design Fluid Layout A fluid layout automatically adjusts its design based on the sire of the viewport. Responsive Images Reponsive images grow and shrink with the size of the viewport. Media Queries Use media eueries to stvle content for