Skip to content

annithehunter/product_listing_page

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

4 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ›οΈ Product Listing Page with Filters

A sleek and responsive Product Listing Page built using HTML, CSS, and JavaScript, featuring advanced search and filtering functionality. This project showcases a modern UI with interactive elements that enhance the user experience.

✨ Features

  • πŸ” Advanced Searching Instantly search products using the intuitive search bar.

  • πŸ—‚οΈ Category Filtering Filter products by category to quickly find what you're looking for.

  • πŸ’° Price Range Filtering Specify minimum and maximum prices to narrow down your selection.

  • πŸ–ΌοΈ Responsive Grid Layout Products are displayed in a clean, mobile-friendly grid.

  • 🎯 Hover Effects Smooth scale-on-hover animation makes the UI feel dynamic and modern.

πŸ“Έ Preview

product_listing_page *A preview of the product listing grid with hover effects and filters.*

πŸ› οΈ Technologies Used

  • HTML – Structuring the content
  • CSS – Styling with responsive layout and animations
  • JavaScript – Handling dynamic search and filter logic

πŸ“‚ Project Structure

/product-listing-page/ β”‚ β”œβ”€β”€ index.html # Main HTML file β”œβ”€β”€ style.css # Styling and layout └── script.js # Search & filter logic

πŸš€ Getting Started

  1. Clone the repository:

    git clone https://github.com/annithehunter/product-listing-page.git
    
  2. Navigate into the project folder: cd product-listing-page

  3. Open index.html in your browser. βœ… No frameworks or libraries required – everything is built with vanilla JS, HTML, and CSS.

πŸ“§ Contact

Created by Aniruddh Kumar Yadav πŸ“« aniruddhyadavhunter@gmail.com πŸ™ GitHub: @annithehunter

⭐️ If you like this project, consider giving it a star!