Design comparison
Solution retrospective
Felt really great about this project. I was trying hard to make the image have the background color like the solution but I was unable. Any advice to make that happen will be greatly appreciated. Thank you for taking the time to review my solution.
Community feedback
- @hitmorecodePosted over 1 year ago
Congratulations well done. The problem you have, you can fix it with
mix-blend-mode: multiply;
and then play with the opacity. You should get there.} .image-header .cover-image { background-color: hsl(277, 64%, 61%); position: absolute; width: 325px; height: 238px; top: 78px; opacity: 1; ## start with 1 and play around border-top-left-radius: 10px; border-top-right-radius: 10px; mix-blend-mode: multiply; }
Marked as helpful1 - @SalahShadoudPosted over 1 year ago
Hey There! Congrats on Finishing this Challenge. Writing HTML classes can save you alot of a time when you review your code or if your working with team on a project, i haev a few notes for you and maybe this will help you in your future challenges and projcts:
- Try to choose class or id names based on the content and not on its styles (Use descriptive names), for example: you gave the purple text inthe header a class of
purple
but it doesn't describe what the class is for (prurple text, purple background) so you can give it a class ofpurple-text
to clearify the purpose of the class when someone else read your code. - Use Comments for better structuring and understanding of the code (Avoid needless comments), for example comment your main sections of the code like the two sections (text or insights section, image section), and use comment on links and CDNs that you use on your project.
- Use utility classes for most used styles like: (flex, grids, font sizes, font weights, colors, background colors), for example create two utility classes (one for flex-row and one for flex-column) and create utility classes for font weights that you are using in your prject to prevent reapeating this styles in css and instead use this classes on the html side.
hope this can help you and give a well understanding of how to write a better and readable code, Happy Coding
0 - Try to choose class or id names based on the content and not on its styles (Use descriptive names), for example: you gave the purple text inthe header a class of
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