Complete the following: , Use your HTML editor to open the cp astaire txt.html, cp media2_txt.css, and cp_animate2_txt.css fles from the html08 review folder. Enter your name and the date in the comment section of each file, and save them as cp_astaire.html, cp media2.css and cp animate2.css respectively. in addition, use your text editor to open the cp captions2 xl.ytt file from the same folder and save it as cp_captions2.vtt. 2 Go to the cp_astaire.html file in your editor. Insert a link to the cp media2.css and cp animate2Css files. Take some time to study the conteals and structure of the doCument. A Scroll down to the aside element titled \"Listen up\". Directly after the introductory paragraph, insert an audio clip with the audio controls displayed in the browser. Add two possible source files to the audio clip: cp_song.mp3 and cp_song.ogg. Identify the mime-type of each audio source. If the browser does not support HTML5 audio, display a paragraph with the messaage Upgrade your browser to HTML5. a Scroll down to the aside element titled \"In Focus\" and after the introductory paragraph insert video clip wvith the video controls enabled and display the poster image cp_poster.png. Ada. two possible sources to the video clip: cp_hatrack.mp4 and cp_hatrack.webm. Include the mime-type for each video source. If the user's browser does not support HTMLS video, display a paragraph with the message Upgrade your browser to HTML5. 5. Directly after the two video sources in the video element you created in the last step, inserta caption track using the captions you will specify in the cp_captions2.vtt file in lter steps, Give the caption track the label Movie Captions and set it as the default track for the video clip. 6. Save your changes to the file and then open the cp_caption2.vtt file in your text editon.

7. Add the following track cues to the cp caption2.vtt file: a. A Title cue appearing in the 0.5 seconds to 5-second interval containing the text The Hat Rack Dance enclosed in a class tag with the name Title. Set the line and align attributes for the caption to 10% and middle respectively to place the caption centered and near the top of the video window. b. A Subtitle cue in the 5.5 to 9-sccond interval with the text from Royal Wedding (1951). Enclose \"Royal Wedding (1951)\" within tags to italicize it. Place the caption at the 10% line and align the caption lext in the middle. C. A Finish cue displayed from the I minute 5 second mark to the 1 minute 11 second mark and containing the text See more videos at Cinema Penguin. Enclose \"Cinema Penguin\" within tags and place the caption at the 80% line and 90% position with the caption text aligned at the end. 8. Save your changes to the file and then go to the cp_media2.css file in your editor. Within the Media Styles section, insert a style rule for all audio and video elements that displays them as bilocks with a width of 95%. Center the audio and video elements by setting the top/bottom margins to 20 pixels and left/right margins set to auto. 9. Go to the Track Styles section and create a style rule for track cues that: a) sets the background color to transparent, b) adds a black text shadow with horizontal and vertical offsets of 1 pixel and a blur of 2 pixels, c) sets the text color to rgb(255, 177, 66), and d) sets the font size to 1,2 em using the sans serif font family. 10. Create a style rule for track cues belonging to the Title class that sets the font size to 2em and font family to serif.

Save your changes to the style sheet and then open the cp_astaire.html file in your browser. Verif. that you can play the audio and video clips and the layout matches that shown in Figure 8-59 Verify that captions are added to the video.clip providing the title and subtitle of the clip at the start of the video and a message about Ginema Penguin at the end. (Note: If you are using ioogle Chrome or Opera, you will have to upload your files to a server if you want to see the captions and the styles you created for the video clip.) 12. Maxinewants to create a transition for the links at the top of the page that enlarges the link text and moves it out and above its default position. Return to the cp_animate2.css file in your editor go to the Transition Styles section and create a style rule for the navitopLinks a selector that a) sets the text color to rab(255, 255, 255), b) adds a text shadow with the color rgba(0, 0,0. 11 a horizontal offset of 1 pixel, a vertical offset of -1 pixel, and a blur of 1 pixel, and c) uses the transform style to apply the functions scale(1,1) and translateY(0px). 13. Within the style rule you created in the last step, add a transition that applies to all of the properties of the selected element over an interval of 1.2 seconds using linear timing. 14. Create a style rule for the navitoptinks a:hover selector that: a) sets the text color to rgb(255, 183, 25), b) sets the text shadow to the color rgba(0, 0, 0, 0.5) with a horizontal offset of 0 pixels, a vertical offset of 15 pixels, and a blur of 4 pixels, and c) uses the transform style with scale(2,2) and translateY(-15px) to double the scale of the object and translate it -15 pixels in the vertical direction. 15. Save your changes to the style sheet and then reload cp_astaire.html in your browser. Hover your mouse pointer over the links at the top of the page and verify that your browser applies a transition over a 1.2 seond duration as each link increases in size and appears to move upward and outward from the page in response to the hover event. The list of Fred Astaire's films has been stored within a table nested within a div element with the ID Marquee. The table is long and Maxine wants to only display a portion of it at a time, allawing the contents of the table to automatically scroll upward as in a theater marquee. To create this animated effect, you change the top position style of the table over a specified time interval, moving the table upward through the marquee.

16. Return to the cp_animate2.css file in your editor and go to the Marquee Styles section and insert a style rule that places the marquee div element with relative positioning. Add a style rule for the table nested within the marguee div element that places the table using absolute positioning. Do not specify any coordinates for either element. 17. Go to the Keyframe Styles section and create an animation named scroll with the following two key frames: a) at 0%, set the value of the top property to 250px and b) at 100%, set the value of the top property to -1300px. 18. Go to the Animation Styles section and apply the scroll animation to the table within the marquee div element over a duration of 50 seconds using linear timing within infinite looping 19. Maxine wants the marquee to stop scrolling whenever the user hovers the mouse pointer over it. Add a style rule for the div#marquee:hover table selector that pauses the animation during the hover event. 20. Save your changes to the file and then reload the cp astaire.html file in your browser. Verify thai the marquee listing the Fred Astaire films starts scrolling automatically when the page loads, goes back to the beginning after the last film is listed, and stops whenever the user hovers the mouse pointer over the marquee. (Note: On touchscreen devices, tap the marquee to initiate the hover event and pause the scrolling text and then tap elsewhere on the page to remove th hover and restart the marquee.)