Scribd
Upload
3 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 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
We take content rights seriously. If you suspect this is your content, claim it here.
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