Design comparison
Solution retrospective
I used linear-gradient to create transparent purple overlay for img:
background-image: linear-gradient(90deg, rgba(120, 9, 121, 0.45) 35%, rgba(120, 9, 121, 0.45) 100%), url(./images/image-header-desktop.jpg);
Community feedback
- @josergzPosted over 2 years ago
Hello, I want to provide feedback.
-
❓ It looks like the desktop layout has a vertical scroll, using google chrome tools it looks like the detail is the size of the footer.
-
✅ in the html you use semantic tags, that's good.
-
❓ The readme.md file, it doesn't show the screenshot, it looks like you have an error in the image path.
-
✅ You solved well the use of color in the image, I used the css filter property, you can investigate about it.
-
✅ The mobile layout looks good.
Overall good job, good luck:)
Marked as helpful1@yulich81Posted over 2 years ago@josergz thanks for the feedback! I've checked the desktop layout, it seems fine both on Firefox and Chrome. But I'll keep in mind to double check it.
You are absolutely right about the screenshots. I forgot to update github repository. Thanks :)
Again, many thanks for the feedback. It was helpful.
0 -
- @Esesosa-maxPosted over 2 years ago
- ✅ Good Looking Desktop Design 4.5/5
- ✅ Well structured, readable 4/5
- 🆗 Responsiveness 2/5
- ✅ Good Application of CSS Variables 4/5
- ✅ Personal Advice : you do not need you the
background-image
property just use The CSS Filter property it is way easier. Here is a Reference Link
Marked as helpful1@yulich81Posted over 2 years ago@Esesosa-max thank you for the feedback. I will try filter property, haven't heard about it yet.
0@Esesosa-maxPosted over 2 years ago@yulich81 , it is Quite mysterious. you can mark the commet as helpful if it help you
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