Pacific Trails Resort See Chapter 2 for an introduction to the Pacific Trails Resort case study. Figure 2.40 shows a sit

[answerhappygod]

Pacific Trails ResortSee Chapter 2 for an introduction to the Pacific Trails Resort casestudy. Figure 2.40 shows a site map for Pacific Trails. The pageswere created in earlier chapters. In this case study, you willimplement a new two-column CSS page layout. Figure 6.62 displays awireframe for a two-column page layout with wrapper, header, nav,main content, hero image, and footer areas.
Figure 6.62 Wireframe for a two-column page layout forthe Pacific Trails website
https://ibb.co/1bMsdND
Figure 6.62 Full Alternative TextYou will modify the external style sheet and the Home, Yurts, andActivities pages. Use the Chapter 4 Pacific Trails website as astarting point for this case study. You have five tasks in thiscase study:
Create a new folder for the Pacific Trails casestudy.
Modify the style rules in the pacific.css file toconfigure a two-column page layout, as shown in Figure6.62.
Modify the Home page to implement the two-column pagelayout, as shown in Figure 6.63.
Figure 6.63 The new Pacific Trails two-column home page(index.html)
https://ibb.co/N9XgnHv
Figure 6.63 Full Alternative TextModify the Yurts page to be consistent with the Homepage.
Modify the Activities page to be consistent with theHome page.
Hands-On Practice CaseTASK 1: THE WEBSITE FOLDER. Create a folder called pacific6. Copyall of the files from your Chapter 4 pacific4 folder into thepacific6 folder. You will modify the pacific.css file and each webpage file (index.html, yurts.html, and activities.html) toimplement the two-column page layout, as shown in Figure 6.62. Seethe new Pacific Trails home page, as shown in Figure 6.63.TASK 2: CONFIGURE THE CSS. Open pacific.css in a text editor. Editthe style rules as follows:
Configure the universal selector with a box-sizing:border-box style declaration.
* { box-sizing: border-box; }Modify the wrapper id. Copy the linear gradient from the stylerules for the body element selector. The wrapper background willdisplay behind the navigation area.
Configure the body element selector. Change thebackground color to #EAEAEA. Remove the background-image andbackground-repeat style declarations.
Configure the header area. Remove the styles associatedwith the background image. Change the height to 120px.
Configure the h1 element selector. Add styles for 3emsize font and 0.25em letter spacing.
Configure the left-column navigation area. Modify thestyles for the nav element selector. Remove the text-aligndeclaration. The nav area will inherit the background color of thewrapper id. Add style declarations to configure this area to floatto the left with a width of 160 pixels. Also set padding to 0 andfont size to 1.2em.
Configure the :link, :visited, and :hover pseudo-classesfor the navigation hyperlinks. Use the following text colors:#5C7FA3 (unvisited hyperlinks), #344873 (visited hyperlinks), and#A52A2A (hyperlinks with :hover). For example,
nav a:link { color: #5C7FA3; }You will organize the navigation hyperlinks within an unorderedlist in later tasks. The navigation area in Figure 6.59 does notshow list markers. Code a nav ul descendant selector to configureunordered lists in the navigation area to display without listmarkers. Also configure the unordered list to have 1em leftpadding.Configure the nav element to have a fixed position.
Configure the right-column main content area. Modify thestyles for the main element selector. Add style declarations toconfigure a white (#FFFFFF) background and 170 pixels of leftmargin. Set overflow to auto (prevents display issues for floatedelements within the main element).
Configure each hero image area (#homehero, #yurthero,and #trailhero) with a 170 pixel left margin.
Configure the footer area. Add style declarations to seta white (#FFFFFF) background color and a 170px leftmargin.
Configure the section element selector. Add a new stylerule for the section element with left float, 33% width, 2em leftpadding, and 2em right padding.
Configure hyperlinks in the header area. Use descendantselectors to configure hyperlinks within the header element with nounderline, white (#FFFFFF) text color for the :link and :visitedpseudo-classes, and light blue (#90C7E3) text color for the :hoverpseudo-class.
Save the pacific.css file.
TASK 3: MODIFY THE HOME PAGE. Open index.html in a texteditor. Configure the left-column navigation area, which iscontained within the nav element. Remove any   charactersthat may be present. Code an unordered list to organize thenavigation hyperlinks. Each hyperlink should be contained within<li> tags. Configure the “Pacific Trails Resort” text in theheader area to be a hyperlink to the Home page(index.html).
Save the index.html file and test it in a browser. Yourpage should look similar to Figure 6.63. Remember that validatingyour HTML and CSS can help you find syntax errors. Test and correctthis page before you continue.
TASK 4: MODIFY THE YURTS PAGE. Open yurts.html in a texteditor. Modify the page in the same manner as the home page.Examine the wireframe in Figure 6.64 and notice that there arethree sections within the main element. Remove the tags thatconfigure the description list from the page. Notice the textcontent is a series of questions and answers. Configure eachquestion within an h3 element. Configure each answer within aparagraph element. Code a section element to contain each questionand answer pair. Save your new yurts.html page and test it in abrowser. Your page should be similar to Figure 6.65. Use the CSSand HTML validators to help you find syntax errors.
Figure 6.64 Wireframe for Pacific Trails contentpages
Figure 6.64 Full Alternative TextFigure 6.65 Pacific Trails yurts.html page
https://ibb.co/ZHSrjTq
Figure 6.65 Full Alternative TextTASK 5: MODIFY THE ACTIVITIES PAGE. Open activities.html in a texteditor. Modify the page in the same manner as the home page.Examine the wireframe in Figure 6.64 and notice that there arethree sections within the main element. Code a section element tocontain each pair of h3 and p elements. Save your newactivities.html page and test it in a browser. It should be similarto the overall page layout shown in Figure 6.65. Use the CSS andHTML validators to help you find syntax errors.
In this case study, you changed the page layout of thePacific Trails Resort website. Notice that with just a few changesin the CSS and HTML code, you configured a two-column pagelayout.