Lucas 👾• 104,420
@correlucas
Posted
👾Hello Florent, congratulations for your solution!
You solution component seems great, you need only to fix 3 issues related to the design:
1.The correct setup for the overlay effect to match the color is using low opacity and mix-blend-mode. In this case you've to add to the <picture> this code: picture {mix-blend-mode: multiply; opacity: .7'
2.The border is too rounded, try to use a value around border-radius: 12px; for the card and the image.
3.Use display: block; and max-width: 100%; for the image, currently the image isn't scaling with the correct proportions, if you've set a fixed height you should delete it in order to let the image scale properly.
Hope it helps and happy coding!
Marked as helpful
0
