Task 1: Create a folder called ch6pacific to contain your Pacific Trails Resort website files. Copy the files from the Chapter 5 Case Study ch5pacific folder.

Task 2: The External Stylesheet. Launch a text editor and open the pacific.css external style sheet file.

The body element Selector. Change the background color to a light blue (#90C7E3). Add style declarations to display a linear gradient that blends from white (#FFFFFF) to light blue (#90C7E3) and does not repeat.

The wrapper id Selector. Add a new selector for an id named wrapper. Configure the wrapper id to be centered (see Hands-On Practice 6.4) with a width of 80%, white background color (#FFFFFF), a minimum width of 960 pixels, a maximum width of 2048px, and a 3px offset dark (#333333) box shadow.

The header element Selector. Remove declarations for line height and indented text. Add declarations to configure 60px height, centered text, and 15px top padding.

The h1 element Selector. Add a style declaration to configure zero top margin.

The nav element Selector. Change the background color to white (#FFFFFF). Add declarations to configure centered text and 10px padding.

The main element Selector. Add a new selector for the main element. Code declarations to configure 1px top padding, 20px right padding, 20px bottom padding, and 20px left padding. At the time this was written, Internet Explorer did not support default styles the HTML5 main element, so add the following style declaration using the display property (see Chapter 7) to nudge this browser to display as expected: display: block;

The h2 element Selector. Add a style declaration to configure 1px offset gray (#CCCCCC) text shadow.

The footer element Selector. Add a declaration to configure 20px of padding.

The homehero id Selector. Add a new selector for an id named homehero. Code declarations to configure 300px height and to display the coast.jpg background image to fill the space (use background-size: 100% 100%;) without repeating.

The yurthero id Selector. Add a new selector for an id named yurthero. Code declarations to configure 300px height and to display the yurt.jpg background image to fill the space (use background-size: 100% 100%;) without repeating.

The trailhero id Selector. Add a new selector for an id named trailhero. Code declarations to configure 300px height and to display the trail.jpg background image to fill the space (use background-size: 100% 100%;) without repeating.

Save the pacific.css file. Use the CSS validator (http://jigsaw.w3.org/css-validator) to check your syntax. Correct and retest if necessary.

Task 3: The Home Page. Launch a text editor and open the index.html file.

Code div tags to add a wrapper div that contains the content of the web page. Use Hands-On Practice 6.4 as a guide.

Configure a div element to contain the coast.jpg image. Code an opening div tag assigned to the id named homehero after the closing nav tag. Next, code a closing div tag. As shown in the wireframe in Figure 6.34, this div is located between the nav element and the main element. There is no HTML or text content for this div. The purpose of this div is to be a placeholder for the CSS that will display the hero image.

Remove the img tag for the coast.jpg photo.

Save and test your page in a browser. It should look similar to Figure 6.35.