Product preview card using grid & flexbox

What are you most proud of, and what would you do differently next time?

I am mostly proud of not giving up on this project since i had trouble adding in icons and making the card itself responsive (mostly with grid).

What i would do differently next time is start using variables which makes styling the pages more easier, Learn more about making images, fonts and other elements more responsive and improve the optimization and SEO for my future projects.

What challenges did you encounter, and how did you overcome them?

making the card responsive. It took me a good while to figure out how and all i had to use was either "grid-template-coloums: 1fr 1fr" for the larger screens or use "display: flex;". And tinker around with the width and height of the card to make it resemble the design in the screenshots provided to build this project.

Adding icons and have trouble resizing them. Did some research and came across this youtuber named kevin powell, who made an video on this same project and it solved most my problems with this challenge. From adding icons for the button element using the data-icon="" attribute to making the images and the card itself responsive.