ProductPreviewCardComponent

This is a solution to the Product Preview Card Component challenge from Frontend Mentor.

The challenge focuses on building a responsive product card layout that matches the provided design as closely as possible using HTML and CSS.

Overview

This project displays a product preview card that includes:

• A responsive product image for mobile and desktop screens
• Product category, title, description, and pricing
• A call-to-action button with hover effect

The layout is fully responsive and adapts smoothly across different screen sizes.

Built With

• Semantic HTML5
• CSS3
• Flexbox
• Responsive images using the <picture> element
• Media Queries
• Google Fonts (Montserrat & Fraunces)

Features

• Mobile-first responsive design
• Clean and semantic HTML structure
• Desktop and mobile image switching
• Hover effect on the "Add to Cart" button
• Pixel-perfect layout close to the original design

Live Demo

View Live Site