DATAWIND DIGITAL SERVICES
INTERN ASSIGN WORK | TASK 3
Task: Build a Netflix-Style Movie Genre UI and Movie Detail Page
Objective:
Create a static UI similar to Netflix, including a Movie Genre Page displaying movie
thumbnails and a Movie Detail Page that shows more information about a selected movie. This
task will improve your skills in HTML and CSS layout, Bootstrap, responsiveness, and
styling.
Part 1: Movie Genre Page
Instructions:
1. Header Section:
○ Create a fixed navigation bar at the top with a dark background and white text,
similar to Netflix.
○ Include a logo (use text for now) aligned to the left.
○ Below the main menu, create a horizontal scrolling genre navigation bar with
genre names such as Action, Comedy, Drama, Sci-Fi, etc.
○ Each genre name should be clickable and should smoothly scroll to its respective
section on the page.
2. Genre Sections:
○ Below the genre navigation, create separate sections for each genre (e.g., Action,
Comedy, Drama, Sci-Fi).
○ Each section should have a heading indicating the genre name.
○ Movies should be displayed in a horizontal scrolling layout under each genre.
3. Movie Thumbnails:
○ Display movie posters as clickable thumbnails in a row format.
○ Each thumbnail should have a fixed size with rounded corners.
○ Clicking a thumbnail should navigate to the Movie Detail Page.
○ Use flexbox or CSS grid for layout.
4. Hover Effects:
○ When hovering over a movie thumbnail, increase its size slightly and add a
shadow effect.
○ Show a short description or Play and More Info buttons when hovering.
5. Responsiveness:
○ Ensure the page is mobile-friendly using @media queries or Bootstrap.
○ On smaller screens, the genre navigation should become a dropdown menu.
○ Adjust the number of thumbnails shown per row based on screen size.
Part 2: Movie Detail Page
Instructions:
1. Movie Banner:
○ Create a full-width background banner using the selected movie’s image.
○ Overlay the movie title in large, bold text and a short description.
○ Include a Play button and an Add to My List button.
2. Movie Information:
○ Below the banner, create a section with movie details including:
i. Release Year
ii. Duration
iii. Genre
iv. Rating
v. A short description of the movie
○ Style it with readable fonts and proper spacing.
3. Cast and Similar Movies Section:
○ Display a Cast Section showing main actors (use dummy images and names for
now). (Optional)
○ Display a MoreDetails Section which displays Subtitles, Genre, Audio, etc.
○ Below that, show a Similar Movies Section, where related movies are displayed
in a horizontal scrollable layout.
4. Footer:
○ Include links like Privacy Policy, Terms of Service, Help Center, Contact Us.
○ Use a dark background to match the Netflix theme.
Screenshots & References:
UI Example (Part 1): https://www.netflix.com/in/browse/genre/34399
UI Example (Part 2): https://www.netflix.com/in/title/81728596
Bonus Task (Optional):
● Add a search bar in the navigation.
● Create a hover animation for buttons and thumbnails.
● Use CSS animations for smooth effects.
Submission Guidelines:
● Submit a .zip file containing your index.html, movie-detail.html, and style.css files.
● Ensure all images are placed in an assets/ folder.
● The design should be clean, responsive, and similar to Netflix.
Duration
Complete this task in 2 Days.
Good luck! Feel free to ask for help if you have any questions or need
clarification.
