This is a solution to the Product preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover and focus states for interactive elements
- Solution URL: Frontend Mentor
- Live Site URL: Github Pages
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
I learned how to work with the tag picture
<picture>
<source media="(min-width:769px)" srcset="./src/imagens/image-product-desktop.jpg">
<source media="(max-width:768px)" srcset="./src/imagens/image-product-mobile.jpg">
<img src="./src/imagens/image-product-desktop.jpg" style="width:auto;height:100%;">
</picture>
- Frontend Mentor - @lucasjanta
- Twitter - @lucasjanta