Design comparison
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Juan, congratulations for your new solution!
For the container you can improve in two sides, the
width
should be only one value, this casemax-width
is a better fit because its responsive, note thatwidth
is fixed. The correct value for this container ismax-width: 1115px
and there's no need to useheight
the container height grows with its inner content. See the changes below:.card { /* width: 100%; */ max-width: 1115PX; /* min-width: 320px; */ background-color: var(--card-background); display: flex; /* height: 250px; */ border-radius: 8px 8px 8px 8px; }
To make your hero image have the same look and the color purple overlay, you need to use
mix-blend-mode
using themultiply
one.The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.Here’s how you can add this to your
img
selector:img { mix-blend-mode: multiply; opacity: 84%;}
✌️ I hope this helps you and happy coding!
Marked as helpful1 - @JuanGarridoTrochePosted about 2 years ago
Thanks for your comments. I will try your improves, it is a great help for me. I didn't know mix-blend-mode property so I'm going to investigate more about it. Thanks for your words!
1
Please log in to post a comment
Log in with GitHubJoin 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