HTML, CSS, and JavaScript - Practical Exam

The goal is to recreate the animation direction video using HTML/CSS/JS with the images you have extracted. Make sure that your output’s animations and timings match the animation direction video.

Limitations

Background image is visible on load.

Female character fades in.

“headline1.” slides in from the left.

Female character fade out, first headline slides out.

“headline2.” slides in from the right.

“sudheadline” fades in.

“Learn More btn” fades in

Logo slides in from right.

Replay button fades in. (When this button is click, it will replay the animation. Note: only the banner will refresh, not the whole web page)

Responsiveness

Desktop: Yes

Tablet: No

Mobile: No