Flex Layout Styles 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. Navigation List 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. Article Styles 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. Nested Section Elements 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. Aside Styles 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. Navigation Lists 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.) Aside Style Michael also wants to hide the aside element when the page is viewed on a mobile device. Add a style rule to accomplish this. Tablet Media Query 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. Tablet Navigation List 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. This is the script I wrote please make any changes if need be. @charset "utf-8"; /* /* Import Design Styles */ @import url("wc_design.css") screen; /* Flex Layout Styles */ body { display:-webkit-flex; -webkit-flex-flow:rowwrap; } nav#hole_list { -webkit-flex:13140px; } article { -webkit-floex:31341px; } { display: :-webkit-flex; -webkit-flex-flow:rowwrap; } articlesection#stats { flex-basis: 120px; flex-grow: 1; flex-shrink: 4; } section#summary { -webkit-flex:41361px;} aside { display:-webkit-flex; -webkit-flex-flow:rowwrap;} aside > div { flex:11180px; } /* ============================= Mobile Styles: 0 - 480 pixels ============================= */ @media only screen and (max-width: 480px) { nav#hole_list { order: 99; } footer { } /* ================================================= Tablet and Desktop Styles: 481 pixels and greater ================================================= */
Flex Layout Styles
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.
Navigation List
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.
Article Styles
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.
Nested Section Elements
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.
Aside Styles
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.
Navigation Lists
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.)
Aside Style
Michael also wants to hide the aside element when the page is viewed on a mobile device. Add a style rule to accomplish this.
Tablet Media Query
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.
Tablet Navigation List
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.
This is the script I wrote please make any changes if need be.
Trending now
This is a popular solution!
Step by step
Solved in 2 steps with 1 images
