@correlucas
Posted
Hello Andrew, congratulations for your solution!
I saw your live site and I liked a lots the work you did, every element are super flexible and responsive, you did a pretty good work applying background-size: cover; to the image making the image clip inside the container.
I've some tips for your:
1.The body background-color seems a little bit too dark, I don't know if is only my impression, but I tried a value like hsl(233deg 47% 10%); and seems better.
2.You did good playing with the opacity trying to match the overlay effect in the component image, there's a easier way to do that, using mix-blend-mode(you read more about this property here: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode). I'll drop you the code I've done the test do match the color in your solution, see the line below:
main .photo .cover { background-color: hsl(277deg 81% 67%); height: 400px; border-radius: 0 10px 10px 0; mix-blend-mode: multiply; }
3.Your component isn't properly aligned due some lack of properties in the body, you can do a easy fix adding height:100vh to and display: flex; and also flex-direction: column; (this to manage the card and the attribution direction. See the code below:
body { height: 100vh; font-family: 'Inter', sans-serif; background-color: var(--main-bg); display: flex; align-items: center; justify-content: center; flex-direction: column; }
I hope it helps you and congrats for your solution, was the more responsive ever I saw.
Happy coding!
