Notes for the Student: Notes for the Student: This Assignment is designed to give you practical experience in building a modern looking website using native HTML5, CSS3 and JavaScript code.
Detailed Specification
This assignment is a continuation of Assignment 2, thus all the requirements for this assignment is to be made “on top” of your Assignment 1.
Responsiveness
You are to make your Home Page and Now Playing pages responsive. Note, for this assignment, you are only required to make it look good for desktop and mobile devices. Thus, you should only write media queries breakpoints for smartphone devices given that Assignment 1 you would have already developed your website to look good for desktop and large screen devices.
Automatic Image Carousel
You are to convert your Hero section from a static image to an automatic image carousel that switches between images every 5 seconds. Note that your image carousel must have at least 5 images. Each image must be sized the same(via code) so that it looks uniform.
Lastly, your image carousel must have two arrows, a left arrow and a right arrow. This is used to control the direction of the images. If the left arrow is clicked then your image carousel should reverse the direction the images are flowing. Whereas, if the right arrow is clicked then the direction of the image should return to the original flow.
The automatic image carousel should flow similarly to the image carousel on https://www.amctheatres.com/ Hero Section
Example :
Movie Details Page
Convert the movie details page from a separate page into a WELL DESIGN popup modal. Thus, on the Now Playing Movies page, when the user clicks on a poster image, a popup modal must be displayed. The popup modal should display all the pertinent information of the clicked movie. The Information should include : movie title, ratings, overview, featured crew, the latest movie page and the link to the trailer of the movie. The modal should also have an X . When the X is pressed, the modal should be “closed.”
