All solutions

I had fun working on this project. Is there any better way to add different color to the right side categories? Also I feel on each category in the right hand "reaction and etc" the four corner of the background color has some subtle lines. I am not sure if there is any, and if so how to add them. Apart from these two questions, any feedback is welcome! Thank you in advance.

When doing this challenge I have following questions:

1. Should I give a fix weight and height for card component, generally speaking?
2. How to make the hover effect on the image? I don't even know what key work to use to search for that result... Please kindly help! 3.I used pseudo elements for my svg icons, how to align them in center with the words/paragraphs?

Thank you for your time in advance!

I didn't come up with the solution myself. Here is the video made by Kevin Powell. I learned a lot along the way by building this project and follow his tutorial. Hope this helps you too. Here is the link:https://www.youtube.com/watch?v=B2WL6KkqhLQ&t=753s

I feel it's difficult to put the image and the production info inside my <article> component. How to evenly divide space between these two? I also feel hard to decide whether to set a width or height for my component?

There are something wrong about my shopping cart icon as well.

What are some suggestion for using media query?

What is the best practices to set a component center?

Thank you in advance!

Based on the feedback I got from my first submission. I fixed some problems. Now I want to see the new result.