Creating a Culinary Web Site - HTML, CSS, and Dynamic HTML - page 753

5. Add a linear gradient to the background of the ul element within the vertical naviga-
tion list. The gradient should start in the upper-right corner of the element with the
semi-transparent color (170, 90, 27) and an opacity of 0.7. The second color in the
gradient should be the semi-transparent value (16, 77, 61) with an opacity of 0.4
placed at a color stop of 50%. The last color value should be the semi-transparent
value (255, 255, 255) with an opacity of 0.4 placed at a color stop of 85%. Use
browser extensions to cover all browsers.
6. Add three backgrounds to the section element:
a. The first background should display the corner.png image in the lower-left corner
with no tiling.
b. The second background should be a linear gradient starting at the left edge with
the semi-transparent value (170, 90, 27) and an opacity of 0.7, followed by the
semi-transparent color (16, 77, 61) with an opacity of 0.7 placed at the 2% color
stop. The last color value should be (255, 255, 255) with an opacity of 0.1 placed
at the 5% color stop.
c. The third background should use the same colors and color stops as in Step 6b
except that the gradient should start from the bottom of the element.
Make sure you use browser extensions to cover all browsers.
7. Gary also wants to create a drop-cap effect for the first paragraph of text in the home
page. Create a style rule for the first letter of the first paragraph within the section
element to do the following: a) set the font color to the value (170, 90, 27) with a
font size of 400%; b) set the font family to Times New Roman or serif; c) float the
letter on the left margin; and d) set the top margin to 15 pixels, the right and bottom
margins to 5 pixels, and the left margin to 0 pixels.
8. Save your changes to the style sheet file, and then return to the corn.htm file in your
text editor.
9. Gary wants to display the number of days until Thanksgiving, and he has located
some JavaScript functions to display the current date and to calculate the number
of days until Thanksgiving from the current date. The function to display the current
date is named showDate(). The function to calculate the days until Thanksgiving is
called daysToThanksgiving(). He's stored both of these functions in the tday.js file.
Insert a script element pointing to the tday.js external JavaScript file.
10. Scroll down to the h1 heading within the article element, and then insert an
aside element directly after the h1 heading.
11. Within the aside element, insert a script element that contains several
document.write() commands to write the HTML code
Todayƒis<brƒ/>
date .
<brƒ/><brƒ/>ƒThereƒareƒ
days
daysƒuntil Thanksgiving.
to the Web page, where date is the text returned by the showDate() function, and
days is the text returned by the daysToThanksgiving() function. Neither function
requires a parameter value.
12. Close the corn.htm file, saving your changes.
13. Return to the ceffects.css file in your text editor. At the bottom of the file, insert
a style rule for the aside element you just created. The style rule should do the
following:
a. Add a 1-pixel solid border with a color value of (127, 90, 0).
b. Add two box shadows to the element. The color value of the first value should
be (0, 0, 0) with an opacity of 0.6, a vertical and horizontal offset of 10 pixels,
and a blur of 15 pixels. The second shadow should be inset with a color value of