Summary
Highlights
The video starts by creating a new 'products.html' file by copying the entire content of the 'home.html' file. The title is then changed to 'All Products - Restore'.
Various sections from the homepage, such as the initial row with text and image, featured categories, featured products, offer, testimonials, and brands, are removed from the 'products.html' file, keeping only the navigation bar and footer.
The gradient background color from the header is removed to give the navigation bar a plain background, which is more suitable for the product listing page.
A new row is added above the product listings. This row includes an 'All Products' title (h2) and a 'select' dropdown for sorting options like 'Default Sorting', 'Sort by Price', 'Sort by Popularity', 'Sort by Rating', and 'Sort by Sell'.
CSS is used to style the newly added row, aligning the title to the left and the sort dropdown to the right using 'justify-content: space-between'. The dropdown itself is styled with a red border, padding, and an outline set to 'none' on focus.
More product cards are copied from the homepage to fill the 'All Products' page, resulting in a total of 12 products. Below the products, a pagination section (page-btn) is created with numbered buttons (1, 2, 3, 4) and a 'next' arrow icon.
CSS styles are applied to the pagination buttons, including margin, display as inline-block, a one-pixel solid border, fixed width and height, centered text, and a pointer cursor. A hover effect is added that changes the background to red and text color to white.
The video concludes by demonstrating that the 'All Products' page is fully responsive, with the dropdown menu and content aligning correctly on smaller screens. The hover effects on buttons also work correctly, completing the 'All Products' page for the e-commerce website.