Skip to content
Submitted about 1 year ago

Stats Preview Card | Frontend Mentor

Ibrahim Suleiman•50
@ebeeraheem
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

HELP NEEDED

This is my least problematic challenge so far. I was able to markup the page with much ease. The only issues I have are:

  • Difficulty trying to set the opacity. I wasn't sure whether opacity was the right property to use as I'm currently not aware of other methods of setting the overlay. Please do let me know if there are other methods.
  • I had some difficulty trying to set the size of the text and the image to be equal (I'm still not sure whether they are equal). How can I set the left-col and right-col to be equal in size?

Community feedback

  • M•940
    @Dev-MV6Posted about 1 year ago
    • Using the opacity property to create the tinted effect for the image is not a bad practice, so don't worry about it. In case you want to try a different approach next time, remember that the background property also allows you to achieve the same effect if you use it like this:
    .right-col {
  background:
    linear-gradient(
      rgba(170, 92, 219, 0.6),
      rgba(170, 92, 219, 0.6)
    ),
    url("images/image-header-desktop.jpg") center / cover no-repeat;
}
    • And regarding to the containers' size... if I'm not wrong, in the original design the containers of the text and the image don't have the same width, so in my opinion you don't need to change anything.

    Overall your solution looks great. Good job 👍

    Marked as helpful
    1
    Ibrahim Suleiman•50
    @ebeeraheemPosted about 1 year ago

    Wow thanks. I still haven't been able to wrap my head around linear-gradient. I'll be sure to dedicate time to learning about it.

    Thank you so much for letting me know.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord