Stats preview card component

Community feedback

• 

  darryncodes•6,370

  @darryncodesPosted almost 3 years ago

  Hi Ragab,

  Good effort, well done!

  • it might be cool to try adding a solid linear-gradient to a background image: background-image: linear-gradient(hsl(277, 64%, 61%), hsl(277, 64%, 61%) ), url(../your/image-filepath); this will help achieve the purple colour to match the design, rather than the overlay approach
  • you also need to explore background-blend-mode. (multiply usually does the trick)
  • it's best practice to not set fixed heights, it plays havoc with responsive design. you should let the content set the height. Also use max-widths over widths to help with responsiveness too
  • your design breaks at tablet size, it might be worth bringing in your media query sooner
  • you could consider using flexbox to center the design nicely in the viewport. I'd suggest the following (also add a max-width to your .card class):

      /* padding: 11rem; */ REMOVE
      /* max-width: 1308px; */ REMOVE
      min-height: 100vh; UPDATE
      font-family: var(--font-f1);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  

  Marked as helpful

  1

  ---

  

  ragab•440

  @RagaBoGaaPosted almost 3 years ago

  @darryncodes Hello!, I really appreciate your feedback! thanks for it and definitely I am going to keep it in my mind and try it.

  0