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

Responsive Stats preview card component usig flexbox

#accessibility

@shameerkamaludeen

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


Hi everyone, I would like to ask a couple of questions that came to mind during the development of this solution.

  • Does cards should be fixed or responsive always
  • Here used 'mix-blend-mode' property on the image to get the effect of the card image, what is the best suggestion.
  • What do you prefer to use in the solution, only flexbox, grid or something else?

Community feedback

@benjoquilario

Posted

Hey @shameerkamaludeen

Great job on finishing this one. It looks good and response rather well.

  • It looks response in my screen😅
  • I think 'mix-blend-mode' is also one of the best solution as you don't need to add another CSS property, one of suggestion is using pseudo-elements like ::before or ::after.
  • You can both use flex or grid as this two is great for responsiveness. If designs is two-dimensional use grid, if designs is one dimensional use flexbox instead. You need to decide to yourself of what you want to use, as these two will make your website responsive.

Some suggestion:

  • Use unordered list <ul> for .stats-wrapper. HTML lists are used to present list of information in well formed and semantic way.

  • Remove margin: 8.5em 0; on your .stats-card. Because you already declare the main tag

   display: flex;
   align-items: center;
   justify-content: center;

the child is already centered as the margin don't have any use at all.

Aside from those everything is great👍. (Sorry for the bad English as I'm still practicing😅)

Keep coding and Good luck

cheers, Benjo

Marked as helpful

2

@shameerkamaludeen

Posted

Thank you very much @benjoquilario for your valuable time, especially the suggestion on making a list of stats is a really great one, I used to follow that but forgot to use it here, thanks for your reminder.

1

@optimusprime202

Posted

Hey @shameerkamaludeen, Fine work!

0

@shameerkamaludeen

Posted

Thank you @optimusprime202

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