I need help ASAP!!

Task 1: Create a Folder.Create a folder called pacific6. Copy all of the files from your Chapter 4 pacific4 folder into the pacific6 folder. You will modify the pacific.css file and each web page file (index.html, yurts.html, and activities.html) to implement the two-column page layout, as shown in Figure 6.55. See the new Pacific Trails home page, as shown in Figure 6.56.

Figure 6.56

The new Pacific Trails two-column home page (index.html)

Description

Task 2: Configure the CSS.Open pacific.css in a text editor. Edit the style rules as follows:

Configure the universal selector with a box-sizing: border-box style declaration.

* { box-sizing: border-box; }

Modify the wrapper id. Change the background color to blue (#90C7E3), which will be the background behind the navigation area.

Configure the left-column navigation area. Modify the styles for the nav element selector. Keep the style declaration that configures bold text. Remove the background color declaration. The nav area will inherit the background color of the wrapper id. Add style declarations to configure this area to float to the left with a width of 160 pixels. Also configure 20 pixels top padding, 5 pixels right padding, no bottom padding, and 20 pixels left padding.

Configure the :link, :visited, and :hover pseudo-classes for the navigation hyperlinks. Use the following text colors: #000033 (unvisited hyperlinks), #344873 (visited hyperlinks), and #FFFFFF (hyperlinks with :hover). For example,

nav a:link { color: #000033; }

You will organize the navigation hyperlinks within an unordered list in later tasks. The navigation area in Figure6.56 does not show list markers. Code a nav ul descendant selector to configure unordered lists in the navigation area to display without list markers. Also configure the unordered list to have no margin and no left padding.

Configure the right-column main content area. Modify the styles for the main element selector. Add style declarations to configure a white (#FFFFFF) background, 170 pixels of left margin, 1 pixel of top padding, and 1 pixel of bottom padding.

Configure each hero image area (#homehero, #yurthero, and #trailhero) with a 170 pixel left margin.

Configure the footer area. Add style declarations to set a white (#FFFFFF) background color and a 170px left margin.

Add the following CSS to be compatible with most older browsers:

header, nav, main, footer { display: block; }

Save the pacific.css file.

Task 3: Modify the Home Page.Open index.html in a text editor and modify the code as follows:

Add the following HTML5 shim code in the head section of the web page after the link element (to assist Internet Explorer 8 and earlier versions):

Configure the left-column navigation area, which is contained within the nav element. Remove any characters that may be present. Code an unordered list to organize the navigation hyperlinks. Each hyperlink should be contained within

tags.

Save the index.html file. It should look similar to the web page shown in Figure 6.56. Remember that validating your HTML and CSS can help you find syntax errors. Test and correct this page before you continue.

Task 4: Modify the Yurts Page.Open yurts.html in a text editor. Configure the left-column navigation area, navigation hyperlinks, and HTML5 shim in the same manner as the home page. Save your new yurts.html page and test it in a browser. Use the CSS and HTML validators to help you find syntax errors.

Task 5: Modify the Activities Page.Open activities.html in a text editor. Configure the left-column navigation area, navigation hyperlinks, and HTML5 shim in the same manner as the home page. Save your new activities.html page and test it in a browser. Use the CSS and HTML validators to help you find syntax errors.

In this case study, you changed the page layout of the Pacific Trails Resort website. Notice that with just a few changes in the CSS and HTML code, you configured a two-column page layout.