Responsive Product Card

Hello, there!

Very nice solution! Here are some tricks which I hope you might find helpful:

• you could set the body min-height to 100vh, make it a flex container and justify-content center and align-items center, then the product will be centered. Something like this:

body {
 min-height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}

By doing this you could get rid of the margin auto trick and you'll have it vertically centered as well.

• nice attempt with the before price. If you'd like the line to cross the old price, all there is left to do is to use bottom: 50%;

.product-box .info .before-sale::before {
 bottom: 50%;
}

• another nice way to solve this line cross would be to make use of the <s> tag. It's a more semantic html way of crossing some text, you should google it.
• last but not least, I would add some more top and bottom padding to the right panel
• I also think the button has a different font from the design, you should check out the style guide for the 2nd font

Let me know if you've got any questions, keep up the good work!