Z PDF X - Basics of Web Design HTML5 CSS (5th E... X X Bookmarks >...
Fantastic news! We've Found the answer you've been seeking!
Question:
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
Expert Answer:
Related Book For
Posted Date:
Students also viewed these computer network questions
-
In July 2009, Malcolm bought a piece of land for 40,000. In June 2016 he sold part of the land for 11,000. This disposal was not caused by a compulsory purchase and was his only disposal of land in...
-
Skeet Corporation has the following selected account balances at June 30, 2017. Prepare the shareholders' equity section of the company's balance sheet. Common Shares, $0,00 500,000 shares...
-
Let X1, . . ., Xn be an N (, 2) random sample with prior p() having N(0, 2) distribution with known 2. Obtain the posterior distribution of .
-
Suppose you and a friend stand within an arm's length of each other and throw a ball back and forth. Describe a method to model an attractive interaction based on throwing the ball.
-
Larry Phillips was hired for a two-year period as executive secretary of the Montana Education Association (MEA). Six months later, he was fired. He then sued MEA for breach of contract and sued the...
-
The final report must contain the following: 1. Cover 2. Title 3. Introduction: Short explanation of the procedures that will be applied. 4. Objectives 5. Description of the company, organization,...
-
1. What are the inputs, process, output, and feedback/control for a grocery store such as Sobeys? 2. What are the operations decisions for running a grocery store such as So beys? Sobeys Inc. is the...
-
Analyze and interpret the complex accounting implications of a merger between two multinational corporations, each with unique accounting practices, tax structures, and financial reporting standards....
-
Femto, SRL produces 7,900 units of its standard product each month, and each requires 2 direct labor hours to produce, which costs them $12 per hour. They also have a deluxe product that requires 7...
-
A parallel plate air condenser consists of two circular plates of diameter 8 cm. At what distance should the plates be placed so as to have the same capacity as that of a sphere of diameter 20 cm .
-
The Soft Lines division manager distributed next season's plan to each buyer. Below are figures for the season last year and this season for each buyer.What is the % increase by buyer and for the...
-
Each contains three of the six items 1 through 6. Here is a collection of twelve baskets. {1,2,3} {2,3,4} {3,4,5} {4,5,6} (1,3,5} {2,4,6} {1,3,4} {2.4,5} (3,5,6} {1,2,4} {2,3,5} {3,4,6} (1) Suppose...
-
write legal brief of Constitutional Law that in topic of business. How and where I find these cases ? and also how narrow my search to topic of Constitutional Law
-
You will write the difference between the Cat5e and Cat6 cables based on their costing in points.
-
Given find the value of k. es 1 e kx dx = 1 4'
-
The formation of propenol on a catalytic surface is believed to proceed by the following mechanism O2+2Scat2OSC3H6+OS C3HOHSC3HOHS C3HOH+S Suggest a rate-limiting step and derive a rate law.
-
Go to the LearnChemE screencast link for Chapter 13 (http://www.umich.edu/~elements/6e/13chap/learn-cheme-videos.html). (a) View one of the screencast 5- to 6-minute video tutorials and list two of...
-
The equilibrium conversion is shown below as a function of catalyst weight down a PBR. The graph compares the values of conversion, X subscript e, and weight W. Initially at W equals 0, the...
-
Draw a UML sequence diagram for a burst read operation with wait states.
-
Draw a UML state diagram for a burst read operation with wait states. One state diagram is for the bus master and the other is for the device being read.
-
Draw timing diagrams for a. a device becoming bus master b. the device returning control of the bus to the CPU
Study smarter with the SolutionInn App