I need help!

TASK 1: THE WEBSITE FOLDER. Create a folder on your hard drive or portable storage device called javajam4. Copy all the files from your

Chapter 3L javajamcss folder into the javajam4 folder. Obtain the images used in this case study from the student files. Copy all the files from the

chapter/starters/iavajam folder into vour javajam4 folder.

TASK 2: THE HOME PAGE. Launch a text editor, and open the index.html file from your javajam4 folder. It is common for the Home page of a website to

have a slightly different layout than the content pages. Modify the

index.html file to look similar to the web page shown in Figure 4.471.

Configure a div element to display the hero.jpg image. Code an opening div tag assigned to the id named homehero after the closing nav tag. Next, code a closing div tag. As shown in the wireframe in Figure 4.48, 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).

Replace the "Relax at JavaJam" text contained within the h2 element with "Follow the Winding Road to JavaJam."

Add a paragraph with the following text below the h2 element and above the existing paragraph: "We're a little out of the way, but take a drive in the country down Garrett Bay Road to JavaJam today! Indulge in our locally roasted free-trade coffee and home-made pastries. You'll feel right at home at JavaJam!"

Configure the text "JavaJam Coffee Bar features:" within an h3 element below the second paragraph and above the unordered list.

Save and test your new index.html page. It will be similar to Figure 4.471, but you'll notice that a few final touches (including the background image and the winding road image) are missing; you'll configure these with CSS in Task 5.

TASK 3: THE MENU PAGE.

Launch a text editor, and open the menu.html page from your javajam4 folder. Modify the menu.html file to look similar to the web page shown in Figure 4.491.

Code an img element for the mugs.jpg image above the h2 element in the main content area. Be sure to include the alt, height, and width attributes. Also configure the image to appear to the right of the text content by coding the align="right" attribute on the tag. Note: The W3C HTML validator will indicate that the align attribute is invalid. We'll ignore the error for this case study. In Chapter 61, you'll learn to use the CSS float property (instead of the align attribute) to configure this type of layout.

Add a paragraph with the following text below the h2 element: "Indulge in our locally roasted free-trade coffee and enjoy the aroma ,the smooth taste, the caffeine! Join our Mug Club and get a 10% discount on each cup of coffee you purchase - ask the barista for details." Hint: See Appendix BI, "Special Characters," for the character code to display the em dash (-).

Save and test your new menu.html page. It will be similar to Figure 4.491, but missing a few final touches (see Task 5).

TASK 4: THE MUSIC PAGE.

Use the Menu page as the starting point for the Music page. Launch a text editor, and open the menu.html file in the javajam4 folder. Save the file as music.html. Modify the music.html file to look similar to the Music page, as shown in Figure 4.50 :

Change the page title to an appropriate phrase.

Delete the image and description list from the page.

Configure "Music at JavaJam" as the text within the h2 element.

Configure the following as the text within the paragraph element: "The first Friday night each month at JavaJam is a special night. Join us from 8 pm to 11 pm for some music you won't want to miss!"

The rest of the content in the page will consist of two areas describing music performances. The area describing each music performance consists of an h4 element, a div assigned to the class named details, and an image link.

January Music Performance:

Configure an h4 element with the following text: January

Code an opening div tag. Assign the div to the class named details.

Configure the melaniethumb.jpg as an image link to melanie.jpg. Code appropriate attributes on the tag.

Configure the following text within the div after the image link: Melanie Morris entertains with her melodic folk style.

February Music Performance:

Configure an h4 element with the following text: February

Code an opening div tag. Assign the div to the class named details.

Configure the gregthumb.jp as an image link to greg.jpg. Code appropriate attributes on the tag.

Configure the following text within the div after the image: Tahoe Greg is back from his tour. New songs. New stories.

Save the music.html file. If you test your page in a browser, you'll notice that it looks different from Figure 4.50 -you still need to configure style rules.

TASK 5: CONFIGURE THE CSS. Open javajam.css in a text editor. Edit the

style rules as follows:

1. Modify the body element selector style rules. Configure fadedroad50.jpg as the background image that does not repeat. This background image will fill the entire browser viewport so set thebackground-attachment property to fixed and the background-size property to cover.

Modify the style rules for the wrapper id. Configure a minimum width of 900px (use min-width). Configure a maximum width of 1280px (use max-width). Use the box-shadow property to configure a drop- shadow effect.

Modify the header element selector style rules. Configure declarations to set top and bottom padding to 5px.

Modify the h1 element selector style rules. Remove the line-height declaration. Code a declaration to set font size to 3em.

Modify the nav element selector style rules. Configure declarations for 1.5em font size size, 5px of top padding, and 5px bottom padding.

Code a new style rule to prevent the hyperlinks in the nav area from displaying the default underline. Use nav a { text-decoration: none;

Modify the footer element selector style rules. Configure declarations for 1em of padding and a solid 2px top border (use #8C3826 as the color).

Add a new style rule for the h4 element selector that configures a background color (#D2B48C), font size (1.2em), left padding (.5em), and bottom padding (.25em).

Configure style rules for the h3 and dt element selectors to set the text color to #8C3826.

Add a new style rule for the main element selector to configure 2em of padding on the left, right, and bottom. You may need to nudge Internet Explorer to display the page as intended by adding the display: block; declaration (see Chapter 6).

Add a new style rule for the class named details to add 20% left and right padding. This will configure empty space on either side of the music performance description and image on the music.html page.

Add a new style rule for the img element selector that configures 10px left padding and 10px right padding.

Add a new selector for an id named homehero. Code declarations to configure 300px height and to display the hero.ipg background image to fill the space (use background-size: cover;) without repeating.