Web design course $...$ chapter $6..$ Pacific trails resort case study Save and test your page in a browser. It should look similar to Figure $6\mathrm{.}33.$

FIGURE $6\mathrm{.}33$

Pacific Trails Home page.

Enjoy Nature in Luxury

Pacific Trails Resort oflers a special lodging experience on the Celfornia North Coast with panoramic views of the Pacific

Ocean. Your stay at Pacific Trals Resort includes a sumptuously appointed provate yurt and a cooked$-$lo$-$order breakdast each

morning.

Relax in our lodge while enjoying complimentary appetizers and beverages

a Sevor nightly fine dining with an ocean view

Unaind in the heased ouldoor pool and whirlpool

Explove the coast on your own or join our guided tours

Pacine Prails Resort

$12010$ Pacifc Trass Road

Zeppre CA SSS$5$S Task $4$: The Yurts Page. Launch a text editor and open the yurts.html file.

Code div tags to add a wrapper div that contains the content of the web page. Use

Hands$-$On Practice $6\mathrm{.}4$ as a guide.

Locate div element for the hero image area shown in Figure $6\mathrm{.}22$ that displays the

yurt.jpg file. Assign the div to the id named yurthero. There is no HTML or text content

for this div. Remove the img tag for the yurt.jpg photo.

Save and test your page in a browser. It should look similar to Figure $6\mathrm{.}34.$

FIGURE $6\mathrm{.}34$

Pacific Trails Yurts page. Pacific Trails Resort

Home Yurts Activities Reservations

Activities at Pacific Trails

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 birdwatching trips at sunrise several times a week.

Give code to get output

In this chapter's case study, you will use the existing Pacific Trails Resort $($Chapter $5)$ website

as a starting point to create a new version of the website. The new design is a centered page

layout that takes up $80\%$ of the browser viewport with a featured hero image on each page.

You'll use CSS to configure the new page layout, a background gradient, hero image, and other

styles, including margin and padding. Figure $6\mathrm{.}32$ displays a wireframe with the wrapper div,

which contains the other web page elements.

FIGURE $6\mathrm{.}32$

New wireframe.

wrapper

header

hero image

main

contact id

footer

You have five tasks in this case study:

Create a new folder for the Pacific Trails Resort website.

Edit the pacific.css external style sheet.

Update the Home page: index.html$.$

Update the Activities page: activities.html$.$

Update the Yurts page: yurts.html$.$

You have five tasks in this case study:

Create a new folder for the Pacific Trails Resort website.

Edit the pacific.css external style sheet.

Update the Home page: index.html$.$

Update the Activities page: activities.html$.$

Update the Yurts page: yurts.html$.$

Task $1$: Create a folder called ch$6$pacific to contain your Pacific Trails Resort website files.

Copy the files from the Chapter $5$ Case Study ch$5$pacific folder.

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

sheet file.