Chapter 7:
Pacific Trails Resort Case Study
In this chapter’s case study, you will use the Pacific Trails existing website (Chapter 6) as a starting point to create a new version of the website that uses a two-column page layout. Figure 7.40 displays a wireframe with the new layout.
Figure 7.40 Pacific Trails two-column page layout.
You have three 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), Yurts page (yurts.html), and Activities page (activities.html) to configure the navigation hyperlinks within an unordered list.
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.
Task 2: Configure the CSS. Launch a text editor and open the pacific.css external style sheet file.
The body element selector. Change the background color to #4F6D93. Change the ending gradient color to #4F6D93.
The wrapper id selector. Change the background color from white (#FFFFFF) to blue (#90C7E3).
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 20 pixels. Configure left float and a width of 160 pixels.