Frontend Mentor - Product preview card component

• Overview
  • The challenge
  • Screenshot
• My process
  • Built with
  • What I learned
• Author

Overview

My solution of the "Produt Preview Card Component" challenge.

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover and focus states for interactive elements

Screenshot

My process

Mobile-first

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• VSCode Colorpicker extension

What I learned

• CSS @media queries are very confusing

Author

• Website - Diego Antunes
• Frontend Mentor - @ydiannewdev