Not Found
Your session has expired please log in again.
Your session has expired please log in again.
Your session has expired please log in again.
Your session has expired please log in again.
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

Responsive Web Page using SASS

Tin.Pham 250

@tin-pham

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


This challenge make me stress because :))) I cant decide when use img and when use background-image I switch 2 each other and that make the page blow out, I spend 2 day to fix my stupid change Anyway, glad that I finished the project Any feedback are welcome ^ ^

Community feedback

Rayane 1,935

@RayaneBengaoui

Posted

Hello Tin.Pham,

Congrats for completing this challenge ! 🙂

I would like to suggest :

  • When using a flex container it's better to use flex-basis property than width because it will be easier for flex items to resize if the container width changes. Here is a good article to understand what's the difference between width and flex-basis (https://mastery.games/post/the-difference-between-width-and-flex-basis/).

  • Use mix-blend-mode: multiply to get closer to the image color.

  • Reduce the line-height to match better the design.

Overall, well done for the challenge and happy coding ! 😃

1

Tin.Pham 250

@tin-pham

Posted

@RayaneBengaoui Oh thanks , very appricate ^ ^

0
Tin.Pham 250

@tin-pham

Posted

@RayaneBengaoui Thanks for give me the "mix-blend-mode" stuff, I change the lightness of hsl but cant march the image, and now I know why

0
T
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hi there, Tin Pham! 👋

Well done on this challenge! 👍 The card component looks good and is responsive! 😀

I just suggest giving the image a smaller max-width in the mobile layout because it is quite wide, at the moment (and therefore a bit large) when the layout of the page first changes. 😉

Keep coding (and happy coding, too)! 😁

0

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