Frontend Mentor - Product preview card component solution

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.

Table of contents

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

Overview

The challenge

Your challenge is to build out this product preview card component and get it looking as close to the design as possible.

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

Your 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

Links

• Solution URL: Solution URL
• Live Site URL: Live site URL

My process

• Fonts
• Markup
• Card
• Flex
• Breakpoints

Built with

• Semantic HTML5 markup
• CSS
• CSS Flex

What I learned

<picture> The browser will consider each child <source> element and choose the best match among them. If no matches are found—or the browser doesn't support the <picture> element—the URL of the <img> element's src attribute is selected. The selected image is then presented in the space occupied by the <img> element.

<picture>
    <source srcset="images/image-product-mobile.jpg" media="(max-width: 600px)" />
    <img src="images/image-product-desktop.jpg" alt="Gabrielle Essence Eau De Parfum">
</picture>

Useful resources

• <picture> - The <picture> HTML element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.

Author

• Website - Santiago Ramirez
• Frontend Mentor - @sanruiz