Design comparison
Community feedback
- @correlucasPosted over 2 years ago
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 anddisplay: flex;
and alsoflex-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!
0
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