👾Hello @joaovitorwitt, Congratulations on completing this challenge!
Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:
You’re on the right track I can see that you’ve used semantic tags well and the site is very responsive, the only thing you might have missed is the image mix-blend mode on the image in the image-wrapper
div. I personally recommend going with background-blend-mode
approach of blending the a linear-gradient()
with your img
to get it looking like the figma design rather than the filter
style for this particular solution.
/*filter approach*/
.image-wrapper img {
filter: invert(10%) sepia(68%) saturate(4400%) hue-rotate(241deg) brightness(50%) contrast(89%);
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
/*mix-blend-mode approach*/
.image-wrapper {
flex: 1;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px
background: linear-gradient(rgba(72, 15, 107, 0.6), rgba(170, 92, 219, 0.2)),
url(./images/image-header-desktop.jpg);
background-blend-mode: multiply;
background-size: cover;
background-repeat: no-repeat;
}
✌️ I hope this helps you and happy coding!
Marked as helpful
@joaovitorwitt
Posted
@ssembatya-dennis Thank you for the suggestion. I will definitely look into that