Css Tasks

 Complete This  2  Task 

1. Responsive Portfolio Website Layout

Task 1st 

create a personal portfolio layout that includes:

A fixed header with a navigation menu.

A hero section with a welcome message or image.

A grid-based section for showcasing 4–6 projects.

A contact section with a form.

Responsive design for mobile, tablet, and desktop using media queries.

Skills Covered:

Flexbox, Grid, Media Queries, Layout, Typography, Color Scheme, Forms.

Task  2nd . Style a Product Card Component

Objective: Focus on styling a reusable UI component with hover effects and transitions.

Task:

Provide students with the HTML structure for a product card (image, title, price, button). Ask them to:

Style it using CSS.

Add a hover effect (e.g., scale or shadow on hover).

Add a transition for smooth animation.

Bonus: make it responsive in a row of 3 cards.

Skills Covered:

Box Model, Flexbox, Transitions, Hover Effects, Component Reusability.

Complete This 2 Tasks And Send It For My Blog  Id