Academic Integrity: tutoring, explanations, and feedback — we don’t complete graded work or submit on a student’s behalf.

Having some trouble with CSS; can you please help? Directions: Table Styles Go t

ID: 3911066 • Letter: H

Question

Having some trouble with CSS; can you please help?

Directions:

Table Styles

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 marquee div element that places the table using absolute positioning. Do not specify any coordinates for either element.

Keyframe

Go to the Keyframe Styles section and create an animation named scrollwith the following two key frames:

at 0%, set the value of the top property to 250px and

at 100%, set the value of the top property to –1300px

Scroll Animation

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

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 tableselector that pauses the animation during the hover event.

Here's what I have:

@charset "utf-8";

/*
New Perspectives on HTML and CSS, 7th Edition
Tutorial 8
Review Assignment

Cinema Penguin Styles for Animation
Author:
Date:

Filename: cp_animate2.css

*/


/* Marquee Styles */

/* Keyframe Styles */
  

/* Animation Styles */

Explanation / Answer

Here is the CSS file:
CSS File:


@charset "utf-8";

/*
New Perspectives on HTML and CSS, 7th Edition
Tutorial 8
Review Assignment

Cinema Penguin Styles for Animation
Author:
Date:

Filename: cp_animate2.css
*/


/* Marquee Styles */
.marquee {
position: relative;
}

.marquee table {
position: absolute;
}

/* Keyframe Styles */
@keyframes scroll {
    0%   {top: 250px;}
    100% {top: -1300px;}
}

/* Animation Styles */
.marquee table {
animation: scroll 50s linear infinite;
}

.marquee table:hover {
    animation-play-state: paused
}

Hope this is helpful. Kindly test your html page with the css file.

Hire Me For All Your Tutoring Needs
Integrity-first tutoring: clear explanations, guidance, and feedback.
Drop an Email at
drjack9650@gmail.com
Chat Now And Get Quote