Independent Challenge $1$

The Spotted Wren Garden Center is adding videos of gardens and landscaping projects to their website to give current and potential customers ideas that they might want to implement for their own homes and businesses. Sarah Nguyen, the manager, has provided you with a set of files containing the first project to be spotlighted. You$$ll add it to a new page on the website.

a$.$ In your editor, open HTM$\_$L$-7.$html from the IC$1$ folder where you store your Data Files for this unit, save it as great.html$,$ then repeat to save HTM$\_$L$-8.$css as styles.css and HTM$\_$L$-9.$vtt as captions.vtt$.$ In the comment section at the top of each file, enter your name and today$$s date where indicated, then save the files.

b$.$ Return to great.html in your editor, then below the h$3$ heading, add code to incorporate a video for modern browsers. Specify hodgkins.png in the images folder as the poster image and indicate that browsers should display video controls. Add a reference to the file hodgkins.m$4$v in the media folder as a source file and specify that the file is in MP$4$ format. Add a reference to the file hodgkins.webm in the media folder as a second source file and specify that the file is in WebM format.

c$.$ Save your changes, then return to styles.css in your editor. Add the video selector to the style rule in the reset styles section that sets border, padding, and margin to $0,$ then in the img style rule in the reset styles section, add the video selector. In the main content section, create a style rule for the video element that specifies margins of $00\mathrm{.}5$em$,$ sets the maximum width to $50\%,$ creates a $1$px solid black border, and floats the element on the right.