Scribd
Upload
2 views

Task 3 - Web Development

The document outlines a task for creating a Netflix-style UI, consisting of a Movie Genre Page and a Movie Detail Page. It includes detailed instructions for layout, design elements, responsiveness, and additional features such as hover effects and a footer. The task aims to enhance skills in HTML, CSS, and Bootstrap within a two-day timeframe.

Uploaded by

Durga Singh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Task 3 - Web Development

The document outlines a task for creating a Netflix-style UI, consisting of a Movie Genre Page and a Movie Detail Page. It includes detailed instructions for layout, design elements, responsiveness, and additional features such as hover effects and a footer. The task aims to enhance skills in HTML, CSS, and Bootstrap within a two-day timeframe.

Uploaded by

Durga Singh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

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.

You might also like