Stats Review

Community feedback

• 

  Ivan•2,610

  @isprutfromua

  Posted about 3 years ago

  Hi there. Good job.

  I have some suggestions for improving css code:

  • declaring variables looks pretty ugly. You need to work on naming.

  
  :root {
      /* ### Primary */
  
  --very-dark-blue: hsl(233, 47%, 7%); /*(main background)*/
  --dark-desaturated-blue : hsl(244, 38%, 16%); /* (card background) */
  --soft-violet: hsl(277, 64%, 61%); /* (accent) */
  
  /* ### Neutral */
  
  --white : hsl(0, 0%, 100%); /* (main heading, stats) */
  --slightly-transparent-white-main-para : hsla(0, 0%, 100%, 0.75); /* (main paragraph) */
  --slightly-transparent-white-stat-head : hsla(0, 0%, 100%, 0.6); /* (stat headings) */
  }
  

  In my opinion, it would be better like this:

  :root {
      --very-dark-blue: 233, 47%, 7%;
      --dark-desaturated-blue: 244, 38%, 16%;
      --soft-violet: 277, 64%, 61%;
      --white : 0, 0%, 100%;
  
      --color-text: hsla(var(--white), 0.75);
      --color-heading: hsla(var(--white), 0.6);
      --color-accent: var(--soft-violet);
  
      --bg-body: var(--very-dark-blue);
      --bg-card: var(--dark-desaturated-blue);
  }
  

  • Your effect does not match the design. Instead, you could use a pseudo-element with a gradient background.

  filter:brightness(80%);
  

  • also, I would advise you to read about css methodology. This will help you better organize your code. In my opinion, this design has only two elements - a card and a picture. That is, in css it will be two components - .card and .image. Further from them you build a tree structure

  card
      -  card-content
          - card-header
          - card-text
          - card-stats
              -card-stat
              .....
  
  

  I hope my feedback will be useful.

  Good luck and fun coding 🤝⌨️

  10

  Marked as helpful