Pacific Trails Resort Case Study In this chapters case study, you will use the existing Pacific Trails Resort (Chapter 6) website as a starting point to create a new responsive version of the website that utilizes media queries. The new design has full width header element, a full width nav element, and an 80% width centered div that contains the main element and footer element. Youll practice a Mobile First strategy for responsive design. First, you will configure a page layout that works well in smartphones (test with a small browser window). Then youll resize the browser viewport to be larger until the design breaks and code media queries and additional CSS as needed. Figure 7.62 shows wireframes for three different layouts. The Home page displays will be similar to Figure 7.63.

You have four tasks in this case study:

Create a new folder for the Pacific Trails Resort website.

Configure the HTML and CSS needed for pleasing display of a single-column (smartphone) display.

Configure the HTML and CSS needed for pleasing display of the web pages on medium sized mobile devices.

Configure the CSS needed for a pleasing display of the web pages on large mobile devices and desktops.

TASK 1: Create a folder called pacific7 to contain your Pacific Trails Resort website files. Copy the files from the Chapter 6 Case Study pacific6 folder into the pacific7 folder.

TASK 2: CONFIGURE A SMALL SINGLE-COLUMN LAYOUT. First, you will edit the CSS. Then you will edit each web page and test in a browser.

CONFIGURE THE CSS. Launch a text editor and open the pacific.css style sheet. Edit the styles to achieve a layout that displays well on small devices using normal flow (no floats) with full-width block elements.

Edit the styles for the body element selector. Set margin to 0. Change the background color to #90C7E3.

Edit the styles for the wrapper id selector. Remove the declarations for the background image, width, margin, and box-shadow.

Edit the styles for the header element selector. Remove the declaration for height. Set 1em padding.

Edit the styles for the h1 element selector. Set 1.5em font size. Remove the declarations for letter spacing and padding.

Edit the styles for the nav element selector. Remove the declarations that configure float, position, width, font-weight, and padding. Set centered text and white background color.

Edit the styles for the nav ul selector. Configure this selector as a flex container with flex-direction set to column. Set 0 margin and 0 left padding.

Code styles for the nav li selector. Set .5em top and bottom padding, 1em left and right padding, 100% width, and a 1px solid bottom border.

Edit the styles for the main element selector. Remove the style declarations for background color, margin, and overflow. Set 0 top and bottom padding. Set 1em left and right padding. Edit styles for the section element selector. Remove the declarations for float and width. Set left and right padding to .5em.

Edit the styles for the homehero, yurthero, and trailhero id selectors. Remove margin-left declaration from each style rule. Set background-size property to 200% 100%, to cause the browser to display cropped versions of the images which will be more pleasing on a small viewport.

Edit the styles for the footer element selector. Remove the margin-left declaration.

Configure styles for the telephone number to display a hyperlink when on the small display and display plain text otherwise.

Code a style rule for the mobile id selector. Set display to inline.

Code a style rule for the desktop id selector. Set display to none.