Scribd
Upload
20 views6 pages

Final Assignment

The final assignment for the Web Design Course requires students to design a cinema portal website using div and CSS layout, featuring a fixed navigation bar and multiple pages including Now Showing, News & Updates, Join Us, Partnership Opportunities, and Register. Each page must adhere to specific design and functionality requirements, such as hover effects, multi-column layouts, and a registration form. Students must submit the website folder named after their student ID, ensuring all code is original and images are stored separately.

Uploaded by

malaklemnouer
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
20 views6 pages

Final Assignment

The final assignment for the Web Design Course requires students to design a cinema portal website using div and CSS layout, featuring a fixed navigation bar and multiple pages including Now Showing, News & Updates, Join Us, Partnership Opportunities, and Register. Each page must adhere to specific design and functionality requirements, such as hover effects, multi-column layouts, and a registration form. Students must submit the website folder named after their student ID, ensuring all code is original and images are stored separately.

Uploaded by

malaklemnouer
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

Final Assignment for Web Design Course

Task:
Design a cinema portal website using div+CSS layout. Specific requirements
are as follows:

1. Homepage with Fixed Navigation Bar

• The homepage must include a fixed navigation bar with at least the following
sections: Home, News & Updates, Now Showing, Register, Join Us, and
Partnership Opportunities.
• Clicking each section should open the corresponding webpage. All pages should
feature the same fixed navigation bar as the homepage.
• The News & Updates section should optionally include a dropdown menu with
sub-options such as Cinema News, Events, and Movie Reviews.

2. Now Showing Page

• Display currently showing movies using a poster photo wall layout.


• When hovering over a movie poster, it should enlarge with a hover effect. Clicking
on a poster should open the movie details page.
• Each movie detail page must include images, text descriptions, and a trailer video.
Text exceeding the visible area should have a scrollbar for viewing the full content.

3. News & Updates Page

• The page should display sections for Cinema News, Events, and Movie Reviews
in a top-down multi-column layout combining images and text.
• Clicking an image or text link should open the corresponding news article in a new
window.
• If a dropdown menu is implemented, anchor links should allow navigation to the
respective sections on the current page. If no dropdown is created, place
hyperlinked section titles at the top of the page.

4. Join Us Page

• Display job postings in a table format. Use CSS to style the table, and implement a
hover effect for rows.
• Below the table, provide an email link for job applications styled as a button using
CSS, with hover and click states showing different effects.
5. Partnership Opportunities Page

• Use a long webpage layout with multiple sections, including one for geographic
location.
• On the left side, add a fixed navigation bar listing the section titles of the page.
Clicking these should jump to the respective sections using anchor links.
• The geographic location section must embed a map using an inline frame to
display the company's address.

6. Register Page

• Design a registration form to collect user information. The form must include
various input controls such as text boxes, password fields, radio buttons,
checkboxes, and dropdown lists.
• Style the form using CSS and include Register and Reset buttons. Clicking the
Register button should send the information to a designated email.

General Requirements

• Name the website folder after your student ID. Store images in a separate folder
named images.
• Use external CSS to maintain a consistent style across all pages. Ensure the
layout is logical, visually appealing, and easy to navigate.
• Name the homepage file index.html. Include your student ID, class, and name at
the bottom of the homepage.
• Compress the website folder and submit it.

Note:

• All code must be written by yourself; templates are not allowed.


• The attached images are for reference only; you need to design the content and
style independently.
• Only 2-3 movies need valid links; the rest can be empty placeholders. The same
applies to News & Updates.

You might also like