Using your editor, open the wc_styles_txt. css file from the html05 [image] case2 folder. Enter your name and the date in the comment section of the file, and save it as wc_styles. css.

Open the wc_hole01.html file in your editor. For this case problem, you do not need to modify any HTML files, but you should take some time to study the contents and structure of this document (the other 17 HTML files have a similar structure). When you’re finished studying the file, you may close it without saving any changes you may have inadvertently made.

Return to the wc_styles. css file in your editor. Use the @import rule to import the style rules from the wc_designs. css file. Write the rule so that the imported style sheet should only be used with screen devices.

You’ll layout the golf course pages using a flex layout. Go to the Flex Layout Styles section and create a style rule for the page body that displays the body as a flexbox oriented in the row direction with wrapping. As always, include the WebKit browser extension in all of your flex styles.

Two of the child elements of the page body are a navigation list with the ID hole_list and an article element containing information about the current hole. Add a style rule that sets the flex growth, shrink, and basis size values of the hole_list navigation list to 1, 3, and 140 pixels.

Add a style rule that sets the flex growth, shrink, and basis size values of the article element to 3, 1, and 341 pixels.

The article element contains statistics and a summary about the current hole. Michael also wants this element to be treated as a flexbox. Add to the style rule for the article element styles that display the element as a flexbox oriented in the row direction with wrapping.

The two items within the article element are a section element with the ID stats and a section element with the ID summary. Create a style rule for the stats section that sets its flex growth, shrink, and basis values to 1, 4, and 120 pixels.

Create a style rule for the summary section that sets its flex growth, shrink, and basis values to 4, 1, and 361 pixels respectively.

The aside element contains an advertisement for other services offered by the Willet Creek Resort. Add a style rule that displays this element as a flexbox in row orientation with wrapping.

Information about individual services are saved in a div element within the aside element. Michael wants these div elements to be laid out with equal flex sizes. Create a style rule for every div element within the aside element that sets the flex growth and shrink values to 1 and the basis value to 180 pixels.

Next, you’ll design the layout for the mobile version of the page. Go to the Mobile Styles section and add a media query for screen devices with a maximum width of 480 pixels.

Under the mobile layout, Michael wants the navigation list containing links to the 18 holes on the course to be displayed near the bottom of the page. Create a style rule that sets the flex order of the hole_list navigation list to 99. Create a style rule that sets the flex order of the footer to 100.

To reduce clutter, Michael wants the horizontal navigation list at the top of the page to be hidden unless the user taps a navicon. Create this hidden menu system by adding the following style rules to

hide the display of the ul element within the horizontal navigation list.

change the display property of the ul element to block if the user hovers over the navicon hypertext link or hovers over the unordered list within the horizontal navigation list. (Hint: Review the hover discussion in session 5.2 as needed.)

Michael also wants to hide the aside element when the page is viewed on a mobile device. Add a style rule to accomplish this.

Next, you’ll create the styles that will be used for tablet and desktop devices. Create a media query for all screen devices with a width of at least 481 pixels.

Within the media query, create a style rule that hides the display of the navicon.

For these wider screens, Michael wants the horizontal navigation list to be laid out within a single row. Create a style rule that changes the display of the ul element within the horizontal navigation list to a flexbox that is oriented in the row direction with no wrapping.

For every list item in the ul element in the horizontal navigation list, set the growth and shrink values to 1 and the basis value to auto so that the list items grow and shrink together on the same row.