This is my solution to the Product preview card component challenge on Frontend Mentor.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • To Do
  • Resources
• Author
• Acknowledgments

Users should be able to:

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

So far this is what it looks like:

• Desktop:
• Mobile (using Firefox's Responsive Design Mode, Samsung Galaxy S20):

• Solution
• Preview

• Semantic HTML5 markup
• CSS
• Flexbox
• Mobile-first workflow

• Add corners to the mobile design.
• Figure out a way for border-radius to work in the Flex .container instead of doing it in the individual items.
• Figure out the proper size and centering for the 'Add to Cart' button.
• Add interactive elements (hover and focus).
• Figure out why src : local() doesn't work even though I have Montserrat installed.
• Make sure the fonts show up (@font-face does not seem to be a good idea anymore).

• A Complete Guide to Flexbox - Really helped with understanding what works and where stuff should go and why. Unfortunately doesn't explain why justify content doesn't work.
• MDN CSS Reference - Very helpful for looking up properties and values. It also has examples, which helped a lot.

• Frontend Mentor - @theangelicme
• Twitter - @henna_senna

I humbly acknowledge a certain individual for pushing me to do this challenge and getting me back into web design.