Help please ! need help

s

Pacific Trails See Chapter 2 for an introduction to the Pacific Trails Case Study. Figure 2.38 shows a site map for Pacific Trails. The Home page and Yurts page were created in earlier chapters. Using the existing website as a starting point, wrapper you will modify the design of the pages to display a large image on each page, as indicated in the wireframe in Figure 4.52. You will header also create a new page, the Activities page. You have five tasks in nav this case study: div with large image 1. Create a new folder for this Pacific Trails case study, and obtain the starter image files. main 2. Modify the Home page to display a logo image and scenic div with contact info photograph as shown in Figure 4.53. 3. Modify the Yurts page to be consistent with the Home page. footer 4. Create a new Activities page, as shown in Figure 4.54 5. Modify the style rules in the pacific.css file as needed. Figure 4.52 New Pacific Trails wireframe Hands-On Practice Case Task 1: Create a folder on your hard drive or portable storage device called pacific4. Copy all the files from your Chapter 3 pacificcss folder into the pacific4 folder. Obtain the images used in this case study from the student files. The images are located in the chapter4/casestudystarters/pacific folder. The images are sunset.jpg, coast.jpg, yurt.jpg trail.jpg, and background.jpg Save the files in your pacific4 folder. Task 2: The Home Page. Launch a text editor, and open the index.html file from your pacific4 folder. Modify the index.html file to look similar to the web page shown in Figure 4.53. Configure a div element to display the coast.jpg image. Code an opening div tag assigned to the id named home hero after the closing nav tag. Next, code a closing div tag As shown in the wireframe in Figure 4.52, 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 divis to display a large image (configured with CSS in Task 5). Save and validate your new index.html page. It will not yet be similar to Figure 4.53; you'll configure CSS in Task 5. Task 3: The Yurts Page. Launch a text editor, and open the yurts.html page from your pacific4 folder. Configure a div element to display the yurt.jpg image. Code an opening div tag assigned to the id named yurthero after the closing nav tag. Next, code a closing div tag. As shown in the wireframe in Figure 4.52, 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 display a large image (configured with CSS in Task 5). Save and validate your new yurts.html page. 64 of fie Trails Resort Enjoy Nature in Luxury Pacific Resorts the Pacific Tras Resort Figure 4.53 New Pacific Trails Resort Home page Pacific Trails Resort Activities at Pacific Trails Miking Kayaking Bird watching T: T: 65 of 70 SP s Page. Use the Yurts page as the starting point for the Activities page. Launch a text editor, and open the yurts.html file in the pacific4 folder. Save the file as activities.html. Modify the activities.html file to look similar to the Activities page, as shown in Figure 4.54: 1. Change the page title to an appropriate phrase. 2. Change the text in the

to be "Activities at Pacific Trails". 3. Modify the div assigned to the id yurthero. Replace yurthero with trailhero. 4. Delete the description list from the page. 5. Configure the following text, using h3 tags for the headings and paragraph tags for the sentences: Hiking Pacific Trails Resort has 5 miles of hiking trails and is adjacent to a state park. Go it alone or join one of our guided hikes. Kayaking Ocean kayaks are available for guest use. Bird Watching While anytime is a good time for bird watching at Pacific Trails, we offer guided bird- watching trips at sunrise several times a week. 6. Configure a span element to contain the phrase "Pacific Trails Resort in the first paragraph on the page. Assign the span to the class named resort. Save the activities.html file. If you test your page in a browser, you'll notice that it looks dif- ferent from Figure 4.54; you still need to configure style rules. Task 5: Configure the CSS. Open pacific.css in in a text editor. Edit the style rules as follows: 1. Modify the body element selector style rules. Configure background.jpg as the back- ground image. 2. Modify the style rules for the wrapper id. Configure the background color to be #ffffff. Configure a minimum width of 700px (use min-width). Configure a maximum width of 1024px (use max-width). Use the box-shadow property to configure a drop-shadow effect. 3. Modify the style rules for the h1 element selector. Configure the sunset.jpg as a background image that displays on the right and does not repeat. Also configure 20 pixels of left padding. Configure a 72-pixel height (the same height as the background image). 4. Modify the style rules for the nav element selector. Configure 5 pixels of padding- 5. Modify the style rules for the footer element selector. Configure 10 pixels of padding. 6. Add a new style rule for the h3 element selector to display #000033 text color. 7. Add a new style rule for the main element selector that configures 20 pixels of left and right padding. Also configure display: block; (this will prevent rendering issues in versions of Internet Explorer that do not support the HTML5 main element). Chapter 4 Visual Elements and Graphics 8. 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. 9. 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. 10. Add a new selector for an id named trailhero. Code declarations to configure 300p height and to display the trail.jpg background image to fill the space (use background-size: 100% 100%; without repeating. 11. Code a new style rule to prevent the hyperlinks in the nav area from displaying the default underline. Use nav a { text-decoration: none; } 12. Have you noticed extra empty space between the logo header area and the navigation Let's do something about that. We'll need to use the CSS margin property, which you' explore in depth in Chapter 6. Modify the style rules for the hl selector to set the bot- tom margin to o with the following code: margin-bottom: 0; Save the pacific.css file. Test your pages (index.html, yurts.html, and activities.html) in a browser. The Home page (index.html) should look similar to Figure 4.53. The new Activi- ties page (activities.html) should look similar to Figure 4.54. If your images do not appear, examine your work carefully. Use Windows Explorer or Mac Finder to verify that the image are saved in your pacific4 folder. Examine the src attribute on the tags to be sure you spelled the image names correctly. Another useful troubleshooting technique is to vali date the HTML and CSS code. See Chapters 2 and 3 for Hands-On Practice exercises that describe how to use these validators