Product preview card component using HTML and CSS

Community feedback

• 

  Bryan Li•3,530

  @Zy8712Posted 12 months ago

  Your site looks pretty good. Your html and css is pretty well organized and easy to follow along. Aside from mobile-responsiveness, one other thing I think you should work on is variables for reusable items. In this case something you used a good bit is the colors. So instead of making a comment at the top of you css to remember what colors and hsl code corresponds to it you should use something like this:

  :root{
    /* Primary */
    --dark-cyan: hsl(158, 36%, 37%);
    --cream: hsl(30, 38%, 92%);
  
    /* Neutral */
    --very-dark-blue: hsl(212, 21%, 14%);
    --dark-grayish-blue: hsl(228, 12%, 48%);
    --white: hsl(0, 0%, 100%);
  
    --font-theme-montserrat: "Montserrat";
    --font-theme-fraunces: "Fraunces";
  }
  

  Then, whenever you want to use one of these variables, for example a color, you do something like this in your css:

  color: var(--dark-grayish-blue);
  

  One last thing, I notice that you only import the font theme "Fraunces" and forgot to import "Montserrat". Here is the import statement for that:

  @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap');
  

  Hope I was able to help 👍

  Marked as helpful

  0