Scribd
Upload
0 views3 pages

HTML CSS Assignment

The document outlines an HTML and CSS assignment consisting of five tasks, including creating a personal portfolio page, a login form, a responsive product card, an image overlay effect, and a navigation bar with dropdown. It provides specific requirements for each task, such as using semantic HTML, applying CSS styling, and ensuring responsiveness. Submission guidelines include proper file naming and compressing files into a ZIP folder by the deadline of Friday, 29 May.

Uploaded by

dhamijachaitanya7
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
0 views3 pages

HTML CSS Assignment

The document outlines an HTML and CSS assignment consisting of five tasks, including creating a personal portfolio page, a login form, a responsive product card, an image overlay effect, and a navigation bar with dropdown. It provides specific requirements for each task, such as using semantic HTML, applying CSS styling, and ensuring responsiveness. Submission guidelines include proper file naming and compressing files into a ZIP folder by the deadline of Friday, 29 May.

Uploaded by

dhamijachaitanya7
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

HTML & CSS Assignment

Web Development Fundamentals

Subject: HTML & CSS


Total Questions: 5
Last Date of Submission: Friday, 29 May

Instructions:
• Create all tasks using only HTML and CSS.
• Use proper folder structure.
• Write clean and properly indented code.
• Use external CSS wherever possible.
• Add comments in your code for better understanding.
• Submit your assignment in a single ZIP folder.

Question 1 – Personal Portfolio Page

Create a simple personal portfolio webpage containing:


• Your name and profile image
• About section
• Skills section
• Contact details
• Navigation bar

Requirements:
• Use semantic HTML tags
• Apply CSS styling
• Add hover effects on navigation links
• Use box-shadow and text-shadow

Question 2 – Login Form Design

Design a professional login form with:


• Username field
• Password field
• Login button
• Forgot Password link

Requirements:
• Center the form using CSS
• Add hover effect on button
• Use border-radius and box-shadow
• Apply proper spacing and alignment

Question 3 – Responsive Product Card

Create a product card containing:


• Product image
• Product title
• Product description
• Price
• Buy Now button

Requirements:
• Add hover animation on card
• Use CSS transitions
• Add shadow effects
• Make the card responsive

Question 4 – Image Overlay Effect

Create an image gallery with overlay text.

Requirements:
• Use position: relative and position: absolute
• Display text on image hover
• Add smooth transition effect
• Use opacity effect

Question 5 – Navigation Bar with Dropdown

Create a responsive navigation bar with:


• Logo
• Menu items
• Dropdown menu

Requirements:
• Use Flexbox
• Add hover effect on menu items
• Style dropdown properly using CSS
• Make the navbar responsive

Submission Guidelines
• File names should be proper.
• Submit:
- [Link]
- [Link]
- images folder (if used)
• Compress all files into one ZIP folder before submission.

Evaluation Criteria
Criteria Marks

HTML Structure 20
CSS Styling 20
Responsiveness 20
Creativity & Design 20
Code Quality 20
Total 100

Best of Luck!
Submit your assignment before Friday, 29 May.

You might also like