@correlucas
Posted
👾Hello Husam, congratulations on your solution!
Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:
1.To get closer to overlay effect
on the photo as the Figma Design its better you use mix-blend-mode
. All you need is the div
under the image
with this background-color: hsl(277, 64%, 61%);
and apply mix-blend-mode: multiply
and opacity: 80%
on the img
or picture
selector to activate the overlay blending the image with the color of the div. See the code bellow:
img {
mix-blend-mode: multiply;
opacity: 80%;
}
Here's a good article explaining these effects with mix-blend-mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
2.1.The easiest way to build this component and make sure that each column will have 50% of the container size is by using GRID
. All you need to do is to use display: grid
to activate the Grid and then make the two columns with grid-template-column: 1fr 1fr
and its done, now you’ve two columns. For the MOBILE VERSION
you can switch to flex
creating a media query using display: flex
and flex-direction: column-reverse
to make the image appear before the text content.
2.To make the image have a better fit inside of it, make the component image responsive with display: block
and max-width: 100%
(this makes the image fit the column/div size) and respect the component size while it scales down. To make it crop while scaling use object-fit: cover
.
img {
display: block;
object-fit: cover;
max-width: 100%;
}
3.Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images easier to work, see the article below where you can copy and paste this CSS code cheatsheet:
[**https://piccalil.li/blog/a-modern-css-reset/**](https://piccalil.li/blog/a-modern-css-reset/)
**✌️ I hope this helps you and happy coding!**
Marked as helpful