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.

Overview

Using only HTML and CSS to replicate a Product Preview Card with responsive design.

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

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Along with Visual Code Camp, I used Photoshop to get some pixel measurements from the original design.

Built with

• Semantic HTML5 markup
• CSS
• Flexbox
• CSS Grid

What I learned

I learned how to make breakpoints more properly.

Continued development

I need to practice the positions more.

Useful resources

• Mr Coder - This helped me how to start the project. I really liked this video.

Author

• Frontend Mentor - @NathalyCavalcante
• Twitter - @Nathaly_Ylahtan