Skip to content
Submitted 10 months ago

Stats preview card component

Jean Jack•110
@JeanJackcss
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

✨ Here's my solution to this challenge ✨

Hello, everyone!

I'm still having problems with tabbing and flexbox, I'm not sure how to use each one very well yet. I followed some tips given by you (Thanks @danielmrz-dev)

  • Some questions, what is the best way to learn how to make responsive templates?
  • How do I color the image in this project? I was about to do it in the adobe package because I couldn't do it with code.

Any help is welcome!

Community feedback

  • Daniel 🛸•44,310
    @danielmrz-devPosted 10 months ago

    Hey again @JeanJackcss!

    Your project looks great!

    I'm really glad my tips are helping you 😊

    About this one: I also had a hard time trying the image coloring when I did this project, but I managed to do it like this:

    .image {
    background-image: linear-gradient(0deg, #7210af9c, #7210af9c), url('images/image-header-mobile.jpg');
    background-size: cover;
    height: 240px;
}

    There's also another (and probably better) option using a property called background-blend-mode, but I confess I don't know how to use it very well. I'm mentioning it because you might wanna look into it. 😊

    Hope it helps!

    Other than that, your project looks fantastic!

    Marked as helpful
    1

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