This is a simple product preview card component designed using HTML and CSS. The card displays a product's image, name, description, price, and an "Add to Cart" button. It is responsive and adjusts its layout on smaller screens.
- Product image with flexible layout
- Product name and description with stylized typography
- Price information, with current and previous price displayed
- "Add to Cart" button with hover effects
- Fully responsive design, optimized for mobile screens
- HTML
- CSS (Flexbox and Media Queries)
- SVG Icons
index.html
: The HTML structure of the product card.style.css
: The styles for the product card, including responsive design.
- Clone or download the repository to your local machine.
- Open the
index.html
file in your browser to view the product preview card. - Modify the contents in
index.html
to update product details such as the name, description, image, and price.
You can customize the card's appearance by modifying the styles in the style.css
file. You can change the colors, font sizes, or layout to fit your needs.