Golden Pulps: Devan Ryan manages the website Golden Pulps, where he shares tips on collecting and fun stories from the “golden age of comic books”—a period of time covering 1938 through the early 1950s. Devan wants to provide online versions of several classic comic books, which are now in the public domain. He’s scanned the images from the golden age comic book, America’s Greatest Comics 001, published in March, 1941 by Fawcett Comics and featuring Captain Marvel. He’s written the code for the HTML file and wants you to help him develop a layout design that will be compatible with mobile and desktop devices. Flex Layout Styles Open the gp_layout.css file and go to the Flex Layout Styles section and insert a style rule to display the page body as a flexbox oriented as rows with wrapping. As always, include the latest -webkit browser extension in all of your flex styles. The page body content has two main elements. The section element with the ID #sheet contains the panels from the comic book page. The article element contains information about the comic book industry during the Golden Age. Devan wants more of the page width to be given to the comic book sheet. Add a style rule that sets the growth and shrink rate of the sheet section to 3 and 1 respectively and set its basis size to 301 pixels. Less page width will be given to the article element. Create a style rule to set its flex growth and shrink values to 1 and 3 respectively and set its basis size to 180 pixels. Panel Images Go to the Mobile Devices section and create a media query for screen devices with a maximum width of 480 pixels. With mobile devices, Devan wants each comic book panel image to occupy a single row. Create a style rule that sets the width of images belonging to the .panel class to 100%. Horizontal Navigation For mobile devices, Devan wants the horizontal navigation links to other pages on the Golden Pulps website to be displayed near the bottom of the page. Within the media query, set the flex order of the horizontal navigation list to 99. Footer Styles Create a style rule to set the flex order of the body footer to 100. (Hint: There are two footer elements in the document, use a selector that selects the footer element that is a direct child of the body element.) Images Go to the Tablet and Desktop Devices: Greater than 480 pixels section and create a media query that matches screen devices with widths greater than 480 pixels. With wider screens, Devan does not want the panels to occupy their own rows as is the case with mobile devices. Instead, within the media query create style rules, define the width of the different classes of comic book panel images as follows: Set the width of size1 img elements to 100%. Set the width of size2 img elements to 60%. Set the width of size3 img elements to 40%. Set the width of size4 img elements to 30%. Horizontal Navigation List For tablet and desktop devices, you’ll lay out the horizontal navigation list as a single row of links. Within the media query, create a style rule that displays the ul element within the horizontal navigation list as a flexbox, oriented in the row direction with no wrapping. Set the height of the element to 40 pixels For each li element within the ul element of the horizontal navigation list set their growth, shrink, and basis size values to 1, 1, and auto respectively so that each list items grows and shrinks at the same rate. Assessment Go to the gp_cover.html and click the "Build Website" button then click the navigation links to view the contents of the cover and first three pages. Verify that with a narrow screen the panels occupy their own rows and with a wider screen the sheets are laid out with several panels per row. Further verify that the horizontal navigation list is placed at the bottom of the page for mobile devices
Golden Pulps: Devan Ryan manages the website Golden Pulps, where he shares tips on collecting and fun stories from the “golden age of comic books”—a period of time covering 1938 through the early 1950s. Devan wants to provide online versions of several classic comic books, which are now in the public domain.
He’s scanned the images from the golden age comic book, America’s Greatest Comics 001, published in March, 1941 by Fawcett Comics and featuring Captain Marvel. He’s written the code for the HTML file and wants you to help him develop a layout design that will be compatible with mobile and desktop devices.
Flex Layout Styles
Open the gp_layout.css file and go to the Flex Layout Styles section and insert a style rule to display the page body as a flexbox oriented as rows with wrapping.
As always, include the latest -webkit browser extension in all of your flex styles.
The page body content has two main elements. The section element with the ID #sheet contains the panels from the comic book page. The article element contains information about the comic book industry during the Golden Age. Devan wants more of the page width to be given to the comic book sheet. Add a style rule that sets the growth and shrink rate of the sheet section to 3 and 1 respectively and set its basis size to 301 pixels.
Less page width will be given to the article element. Create a style rule to set its flex growth and shrink values to 1 and 3 respectively and set its basis size to 180 pixels.
Panel Images
Go to the Mobile Devices section and create a media query for screen devices with a maximum width of 480 pixels.
With mobile devices, Devan wants each comic book panel image to occupy a single row. Create a style rule that sets the width of images belonging to the .panel class to 100%.
Horizontal Navigation
For mobile devices, Devan wants the horizontal navigation links to other pages on the Golden Pulps website to be displayed near the bottom of the page. Within the media query, set the flex order of the horizontal navigation list to 99.
Footer Styles
Create a style rule to set the flex order of the body footer to 100. (Hint: There are two footer elements in the document, use a selector that selects the footer element that is a direct child of the body element.)
Images
Go to the Tablet and Desktop Devices: Greater than 480 pixels section and create a media query that matches screen devices with widths greater than 480 pixels.
With wider screens, Devan does not want the panels to occupy their own rows as is the case with mobile devices. Instead, within the media query create style rules, define the width of the different classes of comic book panel images as follows:
- Set the width of size1 img elements to 100%.
- Set the width of size2 img elements to 60%.
- Set the width of size3 img elements to 40%.
- Set the width of size4 img elements to 30%.
Horizontal Navigation List
For tablet and desktop devices, you’ll lay out the horizontal navigation list as a single row of links. Within the media query, create a style rule that displays the ul element within the horizontal navigation list as a flexbox, oriented in the row direction with no wrapping. Set the height of the element to 40 pixels
For each li element within the ul element of the horizontal navigation list set their growth, shrink, and basis size values to 1, 1, and auto respectively so that each list items grows and shrinks at the same rate.
Assessment
Go to the gp_cover.html and click the "Build Website" button then click the navigation links to view the contents of the cover and first three pages. Verify that with a narrow screen the panels occupy their own rows and with a wider screen the sheets are laid out with several panels per row. Further verify that the horizontal navigation list is placed at the bottom of the page for mobile devices
Trending now
This is a popular solution!
Step by step
Solved in 4 steps
