Day 2: Product Display Card | HTML/CSS | FrontEnd Development

Layout Requirements:
Two-column layout with image on the left and product details on the right
Product image should be visually appealing and properly sized
Content should include:
Product category/tag ("HEADPHONES")
Product title ("Noise-Cancelling Wireless Headphones")
Product description paragraph
Pricing section with:
Current price ($149.99) in bold/large text
Original price ($199.99) with strikethrough
Discount badge ("25% OFF")
Star rating display (5 stars) with review count
Feature list with checkmarks/icons
Quantity selector with plus/minus buttons
Two call-to-action buttons
Shipping information note

Design Requirements:
Use Flexbox for the two-column layout
Make it responsive - should stack vertically on mobile screens
Include appropriate typography hierarchy (headings, body text, pricing)
Add visual styling for:
Price display (current price should stand out)
Discount badge
Interactive buttons with hover effects
Clear visual separation between sections

Technical Requirements:
Use semantic HTML tags
Implement clean, well-commented CSS
Ensure proper spacing and alignment
Make all interactive elements (buttons, quantity selector) visually distinct
The layout should center on the page with appropriate margins

Видео Day 2: Product Display Card | HTML/CSS | FrontEnd Development канала ScratchStart