HTML and CSS Reference
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
9. Gary wants to display the number of days until Thanksgiving, and he has located
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.
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
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
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