Z PDF X - Basics of Web Design HTML5 CSS (5th E... X X Bookmarks >...

Transcribed Image Text:

Z PDF X - Basics of Web Design HTML5 CSS (5th E... X X Bookmarks > Practice with Pos > Fixed Position Na Chapter 7 Review Review Quest Hands-On Ex Focus on Wel Pacific Trails F Path of Light Chapter 8 Responsiv You'll learn how t > CSS Flexible Box > More About Flex > Flexbox Image Gi > Configure Flex Ite > Practice with Flex > CSS Grid Layout > Grid Columns, Ro > Two-Column Gri > Progressive Enha > Centering with Fl Viewport Meta Ta > CSS Media Queri > Responsive Layo > Responsive Grid ! > Flexible Images w > Picture Element > Responsive Img E > Testing Mobile Di Chapter 8 Review Review Quest Hands-On Ex Focus on Wel Pacific Trails F Path of Light > Chapter 9 Table Basic > Chapter 10 Form Bas > Chapter 11 Media an 13 W-L D..L You have five tasks in this case study: Create a new folder for the Pacific Trails Resort website. Edit the pacific.css external style sheet. Edit the Home page (index.html). Edit the Yurts page (yurts.html). Edit the Activities page (activites.html). Task 1: Create a folder called ch7pacific to contain your Pacific Trails Resort website files. Copy the files from the Chapter 6 Case Study ch6pacific folder. Copy the coast2.jpg image from the chapter7/starters folder. Task 2: Configure the CSS. Launch a text editor and open the pacific.css external style sheet file. Edit the CSS as follows: The universal selector. Set the box-sizing property to border-box. * {box-sizing: border-box; } The wrapper id selector. Change the background color from white (#FFFFFF) to blue (#90C7E3). Configure a 1px solid dark blue (#000033) border. Copy the background image style declaration for the linear gradient from the body selector. This will display behind the navigation area. The body element selector. Change the background color to #EAEAEA. Remove the background-image and background-repeat style declarations. The header element selector. Remove the style declarations that configure the background image. Configure height to 120px, top I padding to 30px, and left padding to 3em. The hi element selector. Configure 3em font size and 0.25em of letter spacing. The nav element selector. This is the area that will float on the page. Remove the background-color declaration-the nav area will pick up the background color of the wrapper id. Remove the text-align declaration. Change the padding to 1.5em. Set 120% font size. Configure left float and a width of 160 pixels. The homehero id selector. Configure a 190px left margin. Change the background image to coast2.jpg. The yurthero id selector. Configure a 190px left margin. The trailhero id selector. Configure a 190px left margin. The main element selector. Configure style declarations to set a white (#FFFFFF) background, 190 pixels of left margin, and change the left padding to 30px. To allow for the main element to contain floated elements, also set overflow: auto; The section element selector. Configure a style rule to set a left float, 33% width, 2em left padding, and 2em right padding. Configure the unordered list in the main content area. Replace the ul element selector with a descendant selector (main ul) to specify only ul elements within the main content. The footer element selector. Configure styles to set a 190 pixel left margin and white (#FFFFFF) background color. Configure the navigation area. Use descendant selectors to configure the unordered list and anchor elements within the nav element. Page: 685/1473 POF/ X 10:06 PM 3/1/2022 Z PDF X - Basics of Web Design HTML5 CSS (5th E... X x Bookmarks > Practice with Pos > Fixed Position Na Chapter 7 Review Review Quest Hands-On Ex Focus on Wel Pacific Trails F Path of Light Chapter 8 Responsivi You'll learn how t > CSS Flexible Box > More About Flex > Flexbox Image Gi > Configure Flex It > Practice with Flex > CSS Grid Layout > Grid Columns, Ro > Two-Column Gric > Progressive Enha > Centering with Fl Viewport Meta Ta > CSS Media Queri > Responsive Layo > Responsive Grid I > Flexible Images w > Picture Element > Responsive Img E > Testing Mobile Di Chapter 8 Review Review Quest Hands-On Ex Focus on Wel Pacific Trails F Path of Light Chapter 9 Table Basic > Chapter 10 Form Bas > Chapter 11 Media an 13 W-L D..L Style the unordered list. Configure the ul element selector with no list markers, zero margin, zero left padding, and 1.2em font size. Style unvisited navigation hyperlinks. Configure the link pseudo-class with medium blue text color (#5C7FA3). Style visited navigation hyperlinks. Configure the :visited pseudo-class with dark blue text color (#344873). Style interactive hyperlinks. Configure the hover pseudo-class with dark red text color (#A52A2A). Configure hyperlinks in the header area. Use descendant selectors to configure hyperlinks within the header element with no underline, white (#FFFFFF) text color for the link and :visited pseudo-classes, and light blue (#90C7E3) text color for the :hover pseudo-class. Save the pacific.css file. Check your syntax with the CSS validator ( http://jigsaw.w3.org/css-validator). Correct and retest if necessary. Task 3: Edit the Home Page. Launch a text editor and open the index.html file. Configure the navigation hyperlinks using an unordered list. Remove the special characters. Configure the "Pacific Trails Resort" text in the header area to be a hyperlink to the Home page (index.html). It should be similar to the page shown in Figure 7.46. Task 4: Edit the Yurts Page. Launch a text editor and open yurts.html. Modify the page in a similar manner as the Home page. Examine the wireframe in Figure 7.47 and notice that there are three sections with the main element. Remove the tags that configure the description list from the page. Notice the text content is a series of questions and answers. Configure each question within an h3 element. Configure each I answer within a paragraph element. Code a section element to contain each question and answer pair. Save your file and test it in a browser. It should be similar to the page shown in Figure 7.48. wrapper header nav Page: 687/1473 hero image POF/ main section section section Figure 7.47 Wireframe for Pacific Trails content pages. footer X 10:07 PM 3/1/2022 Z PDF X - Basics of Web Design HTML5 CSS (5th E... X X Bookmarks > Practice with Pos > Fixed Position Na Chapter 7 Review Review Quest Hands-On Ex Focus on Wel Pacific Trails F Path of Light Chapter 8 Responsiv You'll learn how t > CSS Flexible Box > More About Flex > Flexbox Image Gi > Configure Flex Ite > Practice with Flex > CSS Grid Layout > Grid Columns, Rc > Two-Column Gri > Progressive Enha > Centering with Fl Viewport Meta Ta > CSS Media Queri > Responsive Layo > Responsive Grid I > Flexible Images w > Picture Element > Responsive Img E > Testing Mobile Di Chapter 8 Review Review Quest Hands-On Ex Focus on Wel Pacific Trails F Path of Light > Chapter 9 Table Basic > Chapter 10 Form Bas Chapter 11 Media an 13 W-L D..L Pacific Trails Resert Yurts Home Yurts x + Pacific Trails Resort Activities Reservations The Yurts at Pacific Trails What is a yurt? Our luxury yurts are permanent structures four feet off the ground. Each yurt is fully enclosed with canvas walls, a wooden floor, and a roof dome that can be opened. ST 1 How are the yurts furnished? Each yurt is furnished with a queen size bed with down quit and gas- fired stove. Your luxury camping experience includes electricity and a sink with hot and cold running water. Shower and restroom facilities are located in the lodge. Copyright 200 Pacific Tralis Resort your firstnameyerlertname.com What should I bring? Most guests pack comfortable walking shoes and plan to dress for changing weather with light layers of clothing. It's also helpful to bring a flashlight and a sense of adventure! D E Figure 7.48 Pacific Trails Yurts page. Figure 7.48 Full Alternative Text Task 5: Edit the Activities Page. Launch a text editor and open activities.html. Modify the page in a similar manner as the Home page. Examine the wireframe in Figure 7.47 and notice that there are three sections with the main element. Code a section element to contain each pair of h3 and p elements. Save your file and test it in a browser. It should be similar to the overall page layout shown in Figure 7.48. You have successfully implemented multiple columns in this case study. The Pacific Trails Resort website has a two-column page layout! Path of Light Yoga Studio Case Study In this chapter's case study, you will use the existing Path of Light Yoga Studio (Chapter 6) website as a starting point to create a new version of the website with a fixed top navigation bar. Other changes include configuring navigation links within an unordered list, configuring the header area text to be a hyperlink to the Home page, and reworking the text on the content pages. Figure 7.49 displays a wireframe with the new layout. Page: 689/1473 POF/ X 10:07 PM 3/1/2022 Z PDF X - Basics of Web Design HTML5 CSS (5th E... X X Bookmarks > Practice with Pos > Fixed Position Na Chapter 7 Review Review Quest Hands-On Ex Focus on Wel Pacific Trails F Path of Light Chapter 8 Responsiv You'll learn how t > CSS Flexible Box > More About Flex > Flexbox Image Gi > Configure Flex Ite > Practice with Flex > CSS Grid Layout > Grid Columns, Ro > Two-Column Gri > Progressive Enha > Centering with Fl Viewport Meta Ta > CSS Media Queri > Responsive Layo > Responsive Grid ! > Flexible Images w > Picture Element > Responsive Img E > Testing Mobile Di Chapter 8 Review Review Quest Hands-On Ex Focus on Wel Pacific Trails F Path of Light > Chapter 9 Table Basic > Chapter 10 Form Bas > Chapter 11 Media an 13 W-L D..L You have five tasks in this case study: Create a new folder for the Pacific Trails Resort website. Edit the pacific.css external style sheet. Edit the Home page (index.html). Edit the Yurts page (yurts.html). Edit the Activities page (activites.html). Task 1: Create a folder called ch7pacific to contain your Pacific Trails Resort website files. Copy the files from the Chapter 6 Case Study ch6pacific folder. Copy the coast2.jpg image from the chapter7/starters folder. Task 2: Configure the CSS. Launch a text editor and open the pacific.css external style sheet file. Edit the CSS as follows: The universal selector. Set the box-sizing property to border-box. * {box-sizing: border-box; } The wrapper id selector. Change the background color from white (#FFFFFF) to blue (#90C7E3). Configure a 1px solid dark blue (#000033) border. Copy the background image style declaration for the linear gradient from the body selector. This will display behind the navigation area. The body element selector. Change the background color to #EAEAEA. Remove the background-image and background-repeat style declarations. The header element selector. Remove the style declarations that configure the background image. Configure height to 120px, top I padding to 30px, and left padding to 3em. The hi element selector. Configure 3em font size and 0.25em of letter spacing. The nav element selector. This is the area that will float on the page. Remove the background-color declaration-the nav area will pick up the background color of the wrapper id. Remove the text-align declaration. Change the padding to 1.5em. Set 120% font size. Configure left float and a width of 160 pixels. The homehero id selector. Configure a 190px left margin. Change the background image to coast2.jpg. The yurthero id selector. Configure a 190px left margin. The trailhero id selector. Configure a 190px left margin. The main element selector. Configure style declarations to set a white (#FFFFFF) background, 190 pixels of left margin, and change the left padding to 30px. To allow for the main element to contain floated elements, also set overflow: auto; The section element selector. Configure a style rule to set a left float, 33% width, 2em left padding, and 2em right padding. Configure the unordered list in the main content area. Replace the ul element selector with a descendant selector (main ul) to specify only ul elements within the main content. The footer element selector. Configure styles to set a 190 pixel left margin and white (#FFFFFF) background color. Configure the navigation area. Use descendant selectors to configure the unordered list and anchor elements within the nav element. Page: 685/1473 POF/ X 10:06 PM 3/1/2022 Z PDF X - Basics of Web Design HTML5 CSS (5th E... X x Bookmarks > Practice with Pos > Fixed Position Na Chapter 7 Review Review Quest Hands-On Ex Focus on Wel Pacific Trails F Path of Light Chapter 8 Responsivi You'll learn how t > CSS Flexible Box > More About Flex > Flexbox Image Gi > Configure Flex It > Practice with Flex > CSS Grid Layout > Grid Columns, Ro > Two-Column Gric > Progressive Enha > Centering with Fl Viewport Meta Ta > CSS Media Queri > Responsive Layo > Responsive Grid I > Flexible Images w > Picture Element > Responsive Img E > Testing Mobile Di Chapter 8 Review Review Quest Hands-On Ex Focus on Wel Pacific Trails F Path of Light Chapter 9 Table Basic > Chapter 10 Form Bas > Chapter 11 Media an 13 W-L D..L Style the unordered list. Configure the ul element selector with no list markers, zero margin, zero left padding, and 1.2em font size. Style unvisited navigation hyperlinks. Configure the link pseudo-class with medium blue text color (#5C7FA3). Style visited navigation hyperlinks. Configure the :visited pseudo-class with dark blue text color (#344873). Style interactive hyperlinks. Configure the hover pseudo-class with dark red text color (#A52A2A). Configure hyperlinks in the header area. Use descendant selectors to configure hyperlinks within the header element with no underline, white (#FFFFFF) text color for the link and :visited pseudo-classes, and light blue (#90C7E3) text color for the :hover pseudo-class. Save the pacific.css file. Check your syntax with the CSS validator ( http://jigsaw.w3.org/css-validator). Correct and retest if necessary. Task 3: Edit the Home Page. Launch a text editor and open the index.html file. Configure the navigation hyperlinks using an unordered list. Remove the special characters. Configure the "Pacific Trails Resort" text in the header area to be a hyperlink to the Home page (index.html). It should be similar to the page shown in Figure 7.46. Task 4: Edit the Yurts Page. Launch a text editor and open yurts.html. Modify the page in a similar manner as the Home page. Examine the wireframe in Figure 7.47 and notice that there are three sections with the main element. Remove the tags that configure the description list from the page. Notice the text content is a series of questions and answers. Configure each question within an h3 element. Configure each I answer within a paragraph element. Code a section element to contain each question and answer pair. Save your file and test it in a browser. It should be similar to the page shown in Figure 7.48. wrapper header nav Page: 687/1473 hero image POF/ main section section section Figure 7.47 Wireframe for Pacific Trails content pages. footer X 10:07 PM 3/1/2022 Z PDF X - Basics of Web Design HTML5 CSS (5th E... X X Bookmarks > Practice with Pos > Fixed Position Na Chapter 7 Review Review Quest Hands-On Ex Focus on Wel Pacific Trails F Path of Light Chapter 8 Responsiv You'll learn how t > CSS Flexible Box > More About Flex > Flexbox Image Gi > Configure Flex Ite > Practice with Flex > CSS Grid Layout > Grid Columns, Rc > Two-Column Gri > Progressive Enha > Centering with Fl Viewport Meta Ta > CSS Media Queri > Responsive Layo > Responsive Grid I > Flexible Images w > Picture Element > Responsive Img E > Testing Mobile Di Chapter 8 Review Review Quest Hands-On Ex Focus on Wel Pacific Trails F Path of Light > Chapter 9 Table Basic > Chapter 10 Form Bas Chapter 11 Media an 13 W-L D..L Pacific Trails Resert Yurts Home Yurts x + Pacific Trails Resort Activities Reservations The Yurts at Pacific Trails What is a yurt? Our luxury yurts are permanent structures four feet off the ground. Each yurt is fully enclosed with canvas walls, a wooden floor, and a roof dome that can be opened. ST 1 How are the yurts furnished? Each yurt is furnished with a queen size bed with down quit and gas- fired stove. Your luxury camping experience includes electricity and a sink with hot and cold running water. Shower and restroom facilities are located in the lodge. Copyright 200 Pacific Tralis Resort your firstnameyerlertname.com What should I bring? Most guests pack comfortable walking shoes and plan to dress for changing weather with light layers of clothing. It's also helpful to bring a flashlight and a sense of adventure! D E Figure 7.48 Pacific Trails Yurts page. Figure 7.48 Full Alternative Text Task 5: Edit the Activities Page. Launch a text editor and open activities.html. Modify the page in a similar manner as the Home page. Examine the wireframe in Figure 7.47 and notice that there are three sections with the main element. Code a section element to contain each pair of h3 and p elements. Save your file and test it in a browser. It should be similar to the overall page layout shown in Figure 7.48. You have successfully implemented multiple columns in this case study. The Pacific Trails Resort website has a two-column page layout! Path of Light Yoga Studio Case Study In this chapter's case study, you will use the existing Path of Light Yoga Studio (Chapter 6) website as a starting point to create a new version of the website with a fixed top navigation bar. Other changes include configuring navigation links within an unordered list, configuring the header area text to be a hyperlink to the Home page, and reworking the text on the content pages. Figure 7.49 displays a wireframe with the new layout. Page: 689/1473 POF/ X 10:07 PM 3/1/2022