Please modify the CSS file using task 2

pacific.css file:

header, main, nav, footer, figure, figcaption, aside, section, article { display: block; }

body { background-color:#4F6D93; color:#666666; font-family: Arial, Helvetica, sans-serif; background-image: linear-gradient(to bottom, #ffffff, #90c7e3); background-repeat: no-repeat; }

#wrapper { width: 80%; margin-left: auto; margin-right: auto; background-color: #90C7E3; min-width: 960px; max-width: 2048px; box-shadow: 3px 3px 3px #333333; }

header { background-color: #000033; color:#FFFFFF; background-image: url(sunset.jpg); background-position: right; background-repeat: no-repeat; height: 60px; text-align: center; padding-top: 15px; }

h1 { margin-bottom: 0; margin-top: 0; font-family: Georgia, "Times New Roman", serif; }

nav { float: left; width: 160px; font-weight: bold; padding: 20px; }

nav ul {list-style-type: none; margin: 0; padding-left: 0; font-size: 1.2em; }

nav a { text-decoration: none; }

nav a:link {color: #000033;} nav a:visited {color: #344873;} nav a:hover {color: #FFFFFF;}

main { padding: 1px 20px 20px 30px; display:block; background-color: #FFFFFF; margin-left: 190px; }

h2 { color:#3399CC; font-family: Georgia, "Times New Roman", serif; text-shadow: 1px 1px 1px #ccc; }

h3 { color: #000033; font-family: Georgia, "Times New Roman", serif; }

dt {color:#000033; }

main ul { list-style-image: url(marker.gif); }

footer {font-size: 75%; font-style: italic; font-family: Georgia, "Times New Roman", serif; text-align: center; padding: 20px; background-color: #FFFFFF; margin-left: 190px; }

.resort {color:#5C7FA3; font-weight: bold; }

#contact { font-size: 90%; }

#homehero { background-image: url(coasthero.jpg); height: 300px; background-repeat: no-repeat; background-size: 100% 100%; margin-left: 190px; }

#yurthero { background-image: url(yurthero.jpg); height: 300px; background-repeat: no-repeat; background-size: 100% 100%; margin-left: 190px; }

#trailhero { background-image: url(trailhero.jpg); height: 300px; background-repeat: no-repeat; background-size: 100% 100%; margin-left: 190px; }

#mobile { display: none; } #desktop { display: inline; }

table { border: 1px solid #3399CC; width: 80%; border-spacing:0;} td, th { padding: 5px; border: 1px solid #3399CC;} td { text-align: center;} .text { text-align: left;} tr:nth-of-type(odd) { background-color: #F5FAFC; }

@media only screen and (max-width: 64em) { body { margin: 0; background-color: #FFFFFF; } #wrapper { min-width: 0; width: auto; box-shadow: none; } #homehero, #yurthero, #trailhero { margin-left: 0; height: 200px; } main { margin-left: 0; } nav { float: none; width: auto; padding: .5em; text-align: center; } nav li { display: inline; padding: .25em .75em; } footer { margin-left: 0;} } @media only screen and (max-width: 37.5em) { header { padding-top: 1em; } main { padding: .1em 1em; font-size: 90%; } h1 { font-size: 1.5em; } nav { padding: 0;} nav li { display: block; margin: 0; border-bottom: 2px solid #330000; } nav a { display: block;} #homehero, #yurthero, #trailhero { background-image: none; height: 0;} #mobile {display: inline;} #desktop {display: none;} }

Pacific Trails Resort Case Study In this chapter's case study you will use the existing Pacific Trails website (Chapter 9) as a start- ing point. You will add a new page to the Pacific Trails websitethe Resevations page. Refer back to the site map for the Pacific Trails website in Chapter 2, Figure 2.27. The Reservations page will use the same two-column layout as the other Pacific Trails web pages. You'll apply your new skills from this chapter and code a form in the content area of the Reservations page. You have four tasks in this case study: 1. Create a folder for the Pacific Trails website 2. Modify the CSS to configure style rules needed for the Reservations page 3. Create the Reservations page: reservations.html. Your new page will be similar to Figure 10.33 when you have completed this step 4. Configure HTML5 form control features on the Reservations page Task 1: Create a folder called ch10pacific to contain your Pacific Trails Resort website files. Copy the files from the Chapter 9 Case Study ch9pacific folder to your new ch10pacific folder Task 2: Configure the CSS. Review Figure 10.33 and the wireframe in Figure 10.34. Notice how the text labels for the form controls are on the left side of the content area but contain right- aligned text. Notice the empty vertical space between each form control. Open pacific.css in a text editor. You will code the following styles above the media queries. a. Configure a label element selector. Set left float, block display, right alignment for text, a width of 120 pixels, and an appropriate amount of right padding. Pacifie Trails Resort Home Reservations at Pacifie Trails Contaet Us Todayt Requied elds ae marked with an asterisk b. Configure the input element and textarea element selec- tors. Set block display and 20 pixels of bottom margin Last Name c. Configure the submit button with a 130px left margin. d. Configure style rules to opti- mize the display on smart- phone-sized mobile devices by rendering the label text above each form control and eliminating the submit but- ton's left margin. Add the following style rules to the media query that targets a maximum width 37.5em: FIGURE 10.33 The new Pacific Trails Reservations page. 78% Page 342 of 447