Activity 31: Angular Ecommerce Product List

This project is a responsive product listing page built with Angular and CSS. It includes a header for navigation and a grid layout to display products in a visually appealing way. The header provides links to different sections, such as "Home," "About," "Products," and "Logout," making it simple for users to navigate the website.

The main section of the page contains product cards displayed in a grid. Each card represents an individual product and includes an image, a title, and two buttons: one for adding the product and another for checking out. The layout is styled to ensure a clean and organized appearance, with spacing between elements and visual enhancements like shadows and rounded corners.

To make the page responsive, CSS media queries are used to adjust the grid layout based on the screen size. On larger screens, such as desktops, the grid displays four columns. For tablets, the grid switches to three columns, and on smaller devices like mobile phones, it further reduces to two columns. This dynamic adjustment ensures the content remains user-friendly and visually appealing, regardless of the device.

The design also sets a minimum width for the container to ensure the layout does not break on very small screens. The product cards and their contents resize gracefully, maintaining readability and usability across all screen sizes. This combination of Angular's component structure and CSS grid layout with media queries creates a scalable and modern solution for showcasing products on a responsive webpage.

Githublink: https://github.com/thisisnotsnorlax/Act31.git