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

Card Component

Guilherme 20

@glhrmarques

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


Somehow, the width: 100%; inside the .purple class in my css was not filling the entire picture. So, I set it to 101%;

Well, I have no ideia why that did not work.

Community feedback

Tereza 605

@sirriah

Posted

Hello, nice work! :)

I have some suggestions:

  • the .purple div is unnecessary. You can add background: hsl(277, 64%, 61%); to the div .image and to the .img-desktop add mix-blend-mode: multiply;. Result be the same and there will not be the problem with 101%.

  • You don't have to use the double img tag for desktop and mobile version. Try to use <img srcset="..."> - link to the documentation.

  • try to use BEM naming in you future projects. This is small project, but naming div "image" is not the best practise in a bigger project.

0

Guilherme 20

@glhrmarques

Posted

@sirriah, thank you so much for your contribution! I'll make sure to learn all your suggestions.

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