Product-preview-card-component using HTML CSS JavaScript

Community feedback

• 

  Néstor•60

  @nesc11Posted 8 months ago

  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!

  Marked as helpful

  0