Design comparison
Community feedback
- @correlucasPosted about 2 years ago
๐พHello Ehtisham Ali, congratulations for your new solution!
Nice work you've done here, the solution is almost done. Something to fix is the vertical alignment for the column with the text content using
align-items: center
/justify-content: left
A good practice to have all the image inside the container scaling and respecting the size of the container, you need to addmax-width: 100%
and add alsoobject-fit: cover
to make the image auto-crop when resizing inside the column:img { display: block; object-fit: cover; max-width: 100%;}
Make the image have the correct purple tone with
mix-blend-mode
. See the steps below to apply to theimg
orpicture
selector:img { mix-blend-mode: multiply; opacity: 75%;}
Here's a good article explaining these effects with mix-blend-mode:
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
โ๏ธ I hope this helps you and happy coding!
1@EhtishPosted about 2 years ago@correlucas Thank you for your feedback. I will definitely apply to your suggestions.
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