Pacific trails resort chapter 8 code

Pacific Trails Resort Case Study

In this chapter’s case study you will use the Pacific Trails existing website ( Chapter 8 ) as a starting point and add an informational table to the Yurts page on the Pacific Trails website. Your new page will be similar to Figure 9.15 when you have completed this case study.

Figure 9.15 Yurts page with a table.

You have three tasks in this case study:

1. Create a new folder for this Pacific Trails case study.

2. Modify the style sheet (pacific.css) to configure style rules for the new table.

3. Modify the Yurts page to use a table to display information as shown in Figure 9.15 .

Task 1: Create a folder called ch9pacific to contain your Pacific Trails Resort website files. Copy the files from the Chapter 8 Case Study ch8pacific folder into the new ch9pacific folder.

Task 2: Configure the CSS. You will add styles to configure the table on the Yurts page. Launch a text editor and open the pacific.css external style sheet file. You will add new style rules above the media queries.

· Configure the table. Code a new style rule for the table element selector that configures a table with a 1 pixel solid blue border (#3399CC), 80% width, and no cellspacing (use border-spacing: 0;).

· Configure the table cells. Code a new style rule for the td and th element selectors that configures 5 pixels of padding and a 1 pixel solid blue border (#3399CC).

· Center the td content. Code a new style rule for the td element selector that centers text.

· Configure the text class. Notice that the content in the table data cells that contain the text description is not centered. Code a new style rule for a class named text that will override the td style rule and left-align the text.

· Configure alternate-row background color. The table looks more appealing if the rows have alternate background colors but is still readable without them. Apply the :nth-of-type CSS3 pseudo-class to configure the odd table rows with a light blue background color (#F5FAFC).

Save the pacific.css file.

Task 3: Update the Yurts Page. Open the yurts.html page for the Pacific Trails Resort website in a text editor.

· Add a blank line above the closing main tag. Configure the text “Yurt Packages” within an h3 element.

· Below the new h3 element, configure a paragraph with the following text:

A variety of luxury yurt packages are available. Choose a package below and contact us to begin your reservation. We’re happy to build a custom package just for you!

· You are ready to configure the table. Position your cursor on a blank line under the paragraph and code a table with four rows, four columns, and a visible border. Use the table, th, and td elements. Assign the td elements that contain the detailed descriptions to the class named text. The content for the table is as follows:

Save your yurts.html file. Launch a browser and test your new page. It should look similar to Figure 9.15 . If the page does not display as you intended, review your work, validate the CSS, validate the HTML, modify as needed, and test again.