Web code

Follow us on Instagram for updates link
Home
projects

Product Card

1

Stylish Product Card with Image Slider using HTML, CSS & JavaScript







In this project, I created a modern and interactive product card using basic web technologies: HTML, CSS, and JavaScript. This design is perfect for eCommerce websites, portfolios, and UI showcases. The card is smooth, responsive, and visually appealing.

Key Features:

  • Image Slider (Manual & Auto)
  • Hover Animations on Image, Button, and Icons
  • Old vs New Price Display
  • Like (Heart) and Cart Icons with Interaction
  • Responsive Design with Flexbox

Technologies Used:

  • HTML5
  • CSS3 (Transitions, Flexbox, Border Radius, Box Shadow)
  • JavaScript (Image slider functionality)
  • Bootstrap Icons (via CDN)

Project Preview:

You can see the project in action in the video/screenshot above. The product card displays a Nike Air Presto shoe, with an original price of ₹1299 and a discounted price of ₹1099. Users can like the product, slide between images, and click the "BUY NOW" button for further action.

Use Cases:

  • Online store product pages
  • UI/UX design portfolio components
  • Frontend practice for beginners
  • Blog tutorials for learning HTML, CSS & JS

What’s Next?

I plan to turn this static product card into a dynamic component using PHP or Firebase, with full backend support. This will include multiple product variants, login functionality, and a working cart system.

Source Code:

The complete source code is available. Check the link in my bio or DM me if you're interested!

Google drive :-  click here 

Telegram :- click here 

Follow for more UI/UX and coding projects!

#HTML #CSS #JavaScript #FrontendDesign #UIComponent #eCommerceCard #WebDevelopment #CodeWithAnurag