product-preview-card-component using html and css

👾Hello @kennyoyaf, Congratulations on completing this challenge!

Great start and great first solution! You’ve done really good work here putting everything together, I’ve some suggestions you can consider applying to your code:

1.The image is not responsive yet, a quick way to make any image responsive and respecting the container size is to add display: block and max-width: 100% to the <img> selector. To improve the responsiveness even more adding the auto-crop property you can add object-fit: cover to make the image crop inside the container its inside.

img {
    display: block;
    object-fit: cover;
    max-width: 100%;
}

Align the text content for the secont column vertically with align-items: center:

@media only screen and (min-width: 992px)
.container {
    width: 50%;
    display: flex;
    flex-direction: row;
    height: 65vh;
    align-items: center;
}

✌️ I hope this helps you and happy coding!