Design comparison
Solution retrospective
I didn't know how to make the image purple
Tried googling and found some information about webkit-filter but I'd rather learn from looking at other people's code
Community feedback
- @HassiaiPosted almost 2 years ago
To center #card on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.
To center #card on the page using flexbox: body{ min-height: 100vh; display: flex; align-items: center; justify-content: center; }
To center #card on the page using grid: body{ min-height: 100vh; display: grid; place-items: center; }
For the color of the image, wrap the img in a section tag and give it a class for the styling.
<section class= " card-image"><img></section>
. in the css give .card-image a background-color of soft violet and object-fit: cover, mix-blend-mode: multiply and opacity 0.8 to the img ..card-image{ background-color: hsl(); } img{ width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; opacity: 0.8; }
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful0@0xevPosted almost 2 years ago@Hassiai You are awesome, thank you very much for a feedback!
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