Design comparison
Solution retrospective
What did you find difficult while building the project? =overlay CSS on the image for that purple color by just using only CSS.
Which areas of your code are you unsure of? =i am not happy with the image overlay and unsure of that.
Community feedback
- @HassiaiPosted over 1 year ago
Give the alt attribute in the img a value. The value of the alt attribute is the description of the image. For decorative images like icons, there is no need to give it an alt value, for more on alt attribute Click here.
For the color of image, give .image-container a background-color of soft violet and give the img a width and height of 100%, mix-blend-mode: multiply , opacity: 0.8 and object-fit: cover.
.image-container{ 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
1@aaishverPosted over 1 year ago@Hassiai thank you, i dont remember the number but I have seen too many vedios for this blend thing still inlast I did it with overlay div just to complete my challenge . really helpful
0 - @shashikantdev3Posted over 1 year ago
Hello there 👋. Good job on completing the challenge!
Here are some suggestions regarding your code that may interest you.
For Responsiveness, especially for mobile screens
Your solution for desktop screen size looks excellent, but for Mobile screens, try to add more CSS to your media query. try using Flex or Grid to make it responsive for mobile screens.
Below is the link to my solution repo, please feel free to take a look and get the idea of proper restructuring of media queries, accessibility and usage of utility class and be careful when you use GRID and Flex.
You can see the tutorial, where Kevin explain all these things very clearly, below, is the YouTube link for the tutorial.
I hope you find it helpful!😏 Above all, the solution you submitted is 👌. 🎉Happy coding!
1@aaishverPosted over 1 year ago@shashikantdev3 i do tried many but in the end to complete I did the responsiveness to last for the 375px for mobile screen as its the thing mentioned for mobile that's why
0@aaishverPosted over 1 year ago@shashikantdev3 have you seen the whole 1hr video for this website amazing bro you really dedicated
0@shashikantdev3Posted over 1 year ago@aaishver One pro tip that I follow while designing, use the Mobile-First Design approach which is first work on the smallest screen first and gradually work up to larger screen sizes.
I hope you find it helpful!
🎉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