Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Stats preview card component

Jean Jackβ€’ 110

@JeanJackcss

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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,230

@danielmrz-dev

Posted

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
Discord logo

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