Design comparison
SolutionDesign
Solution retrospective
Design for a card
Community feedback
- @NehalSahu8055Posted about 1 year ago
Hello Coder 👋.
Congratulations on successfully completing the challenge! 🎉
Few suggestions regarding design
- For Image use
- HTML
<picture class="main__picture-header"> <source media="(min-width: 600px)" srcset="./images/desktop-header.webp"> <img src="./images/mobile-header.webp" alt="give a proper alt" class="main__header-image" width="540" height="446"> </picture>
- CSS
.main__picture-header { background: var(--soft-violet); } .main__header-image { mix-blend-mode: multiply; opacity: .75; object-fit: cover; }
I hope you find this helpful.
Happy coding😄
Marked as helpful0
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