Stats preview card component (CSS Grid, Flexbox, Responsive)

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  @SonuKr95, how are you? Well Done for completing this challenge. You did a good job Check out these: For the mobile design give the body a width of 90%: body{width: 90%}. No need flex-direction: column in the mobile design. no need for the .main-cont because everything is in the main.

  For the .image add the background-color to it then give it a background-blend-mode of multiply : .image{ background-image: url() and all it properties; background-color: hsl(); background-blend-mode: multiply;} then you give it a border-radius. There is no-need for the class overlay. I will advise you put all the text in one div , give it a class then you give it a background-color, and a padding value. You forgot to give the .ht a text-transform: .ht{ text-transform: uppercase;} After the media query main{display: grid; width: 50rem; grid template columns: repeat (2, 1fr)} for the image you repeat what you did in the mobile design. Aside from these, everything is good. Hope am helpful. HAPPY CODING

  0