Stats Preview Card

Community feedback

• 

  Stefan•180

  @st3wnPosted about 3 years ago

  Hey man,

  for the colored image you can use a linear-gradient. Example:

  background-image: linear-gradient(rgba(170, 92, 219, 0.45), rgba(170, 92, 219, 0.45)), url("../img/image-header-desktop.jpg");

  In this case, the image would have a pink overlay (0.45).

  Marked as helpful

  1

  ---

  

  Yared•90

  @yaredh30Posted about 3 years ago

  @st3wn Hey man thanks a lot for the suggestion on how to change the image color. I appreciate it. Ill give it a try! Can you view my code?

  0

  

  Stefan•180

  @st3wnPosted about 3 years ago

  @yaredh30 its late for me so i will just use the screenshot

  -use text-align: left; instead of text-align: center; -use linear-gradient as I said -the words on the bottom have to be in CAPS -use flex box -use font-weight: bold; on the words 10k, 314, 12M+ -give the words 10k, 313, 12M+ a line-height: 0; to set a margin between this and the text under it -check this challenge on my profile and check my code for some isnspiration ^^

  0

  

  Yared•90

  @yaredh30Posted almost 3 years ago

  @st3wn I tired using the display: flexbox for the words and nothing changed. I also tried changing the image color like u told me but my image is gone now. I'll deff check out your work!

  0
• 

  Sameeruddin Mohammed•120

  @mdsameer1992Posted about 3 years ago

  Hey. Couldn't check your code. Quick review. You didn't make a responsive design for mobile. For image color I tried overlaying another div element on top of image with color given in styleguide and apply hue saturation contrast and opacity.

  Marked as helpful

  1

  ---

  

  Yared•90

  @yaredh30Posted about 3 years ago

  @mdsameer1992 Why couldn't you check out my code? I think its because maybe its at the bottom. Yea I'm still learning how to make a responsive design for mobile. I'll give the image color a try. Thank you for your feedback. Means a lot!

  0