Figure below shows a web page containing text from aShakespearean sonnet. In this Coding Challenge you will augment thetext of the poem with background colors and images and add agraphic border.
Do the following:
1. Open the code4-1_txt.html and code4-1_back_txt.css files fromthe html04 c code1 folder. Enter your name and the date in eachdocument and save the files as code4-1.html and code4-1_back.cssrespectively.
2. Go to the code4-1.html file in your editor. Within the headsection insert a link element linking the page to thecode4-1_back.css style sheet file.
3. Enclose the content of the sonnet within a figure element. Atthe top of the figure element insert a figure caption containingthe HTML code Sonnet 116 by William Shakespeare.
4. Save your changes to the file and return to thecode4-1_back.css file in your editor.
5. Create a style rule for the figure element that:
a. Sets the padding space to 20 pixels.
b. Adds a 20-pixel border in the ridge style with the colorvalue rgb (52, 52, 180).
c. Has a background consisting of the image file ws.png placedin the bottom right corner of the figure box and set to 45% of thewidth of the figure box with no tiling. Be sure to separate theposition of the image and its size with the/ character. Add asecond background containing the color rgba (52, 52, 180, 0.3).Enter both background properties within a single style ruleseparated by a comma.
d. Has a black box shadow that is 5 pixels to the right, 10pixels down with a blur size of 15 pixels.
6. Create a style rule for the figure caption that:
a. Sets the font size to 1.8em.
b. Centers the text of the caption.
c. Adds a 2-pixel bottom solid bottom border of the color valuergb (52, 52, 180).
