Product-preview-card-component using HTML CSS JavaScript

Greetings,

I have some suggestions about your code:

• You might try to add more custom properties, so you can can leverage a template in all your projects, maybe for a little project like this is not a problem. I took that from a Kevin Powell tutorial. For example:

:root {
    /* Font family */
    --ff-sans: "Montserrat", sans-serif;
    --ff-serif: "Fraunces", serif;

    /* Font sizes */
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;
    --fs-3xl: 1.875rem;
    --fs-4xl: 2.25rem;
    --fs-5xl: 3rem;
    --fs-6xl: 3.75rem;

    /* Font weights */
    --fw-m: 500;
    --fw-b: 700;

    /* COLORS */
    /* Primary */
    --clr-dark-cyan: hsl(158, 36%, 37%);
    --clr-cream: hsl(30, 38%, 92%);

    /* Neutral */
    --clr-neutral-very-dark-blue: hsl(212, 21%, 14%);
    --clr-neutral-dark-grayish-blue: hsl(228, 12%, 48%);
    --clr-neutral-white: hsl(0, 0%, 100%);
}

• In the tag div with the class name card, you can replace the units of the width property from px to % and additionally set a max-width property, so your card becomes more responsive.

.card {
    background-color: var(--clr-neutral-white);
    width: 90%;
    max-width: 650px;
    margin-inline: auto;
    border-radius: 10px;
}

I hope you find it useful, keep coding!