Stats Preview Card Component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hi Quintin Latimore, congrats on completing this challenge!

  I've just opened your live site and I can say that you did a great job putting everything together! There's some tips to improve your solution:

  You can add the same effect of the design for the image overlaying it with purple there's a shortcut that is by using mix-blend-mode with the mode multiply and with an opacity around opacity: 82%. See the code below:

  img {
  mix-blend-mode: multiply;
  opacity: 82%;}
  

  To make your hero image have the same look and the color purple overlay, you need to use mix-blend-mode using the multiply one.The mix-blend-mode CSS property sites how an element's content should blend with the content of the element's parent and the element's background.

  Here’s how you can add this to your img selector: img { mix-blend-mode: multiply; opacity: 84%;}

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Quintin Latimore•100

  @quintin156Posted about 2 years ago

  @correlucas Thanks for the insight that's exactly what i was looking for

  1
• 

  Lucas Cerri•1,140

  @llKryptonixllPosted about 2 years ago

  Great work I also made this with Tailwind and it was my first project with Tailwind. You can add media queries in Tailwind aswell https://tailwindcss.com/docs/responsive-design. I hope this helps if not you can check my solution https://www.frontendmentor.io/solutions/stats-preview-card-html-tailwind-css-gTtRv83I0x.

  0
• 

  Adriano•38,270

  @AdrianoEscarabotePosted about 2 years ago

  Hi Quintin Latimore, how are you?

  I really liked the result of your project, but I have some tips that I think you will like:

  1- Document should have one main landmark, you could have put all the content inside the main tag click here

  2- All page content should be contained by landmarks click here

  The rest is great!!

  Hope it helps...👍

  0