This is a solution to the Product preview card component challenge on Frontend Mentor.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover and focus states for interactive elements
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Visual Studio Code
Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge.
<img
srcset="images/image-product-desktop.jpg 600w, images/image-product-mobile.jpg 686w"
sizes="(max-width: 600px) 686px, 300px"
src="images/image-product-desktop.jpg"
alt="A bottle of perfume surrounded by foliage"
>
- Complete guide to Flexbox - Great reference for Flexbox
- Responsive Images: Reference Guide - Extremely comprehensive guide to respomsive images
- Website - Jenny Mikac
- Frontend Mentor - @ymaudlinmandrake
- Twitter - @jennymikac