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 with Grid and Flexbox

Luis Colina 1,043

@Comet466

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, just completed this challenge i think it hits pretty close to the mark even thou the image doesn't have the background color (it has it but with opacity, i put a colored screen to give color to the image) pretty sure there's a better way to put color on a background image but that was what i came out with, surely someone will tell me a better way to do it, any kind of feedback will be appreciate, happy coding

Community feedback

Rayane 1,935

@RayaneBengaoui

Posted

Hello Luis Colina,

Congrats for completing this challenge ! 🙂

To get closer to the design you could use the mix-blend-mode: multiply that will blend the image with the parent's background.

Also consider reducing a little bit the padding of your body for the mobile view, to get more space for your content.

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

1
Luis Colina 1,043

@Comet466

Posted

Hi Rayane, i already make the changes to the padding (yeah for the mobile version was 4 rem, way too much for side to side) and didnt knew that you could just blend all the content on the background with one property, thanks a lot for taking the time of watching my code and helped me to improve it, have a good day

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