Design comparison
Solution retrospective
How can I change the image color, if its not a background image?
Community feedback
- @vanzasetiaPosted almost 3 years ago
👋 Hi Priyanka!
🎉 Congratulations on finishing your second challenge on Frontend Mentor! I have some feedback to help you improve this solution:
- Accessiblity
- For any decorative images, each
img
tag should have emptyalt=""
andaria-hidden="true"
attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only. - Only have one
h1
for every page. Heading one is used to identify each page, not for sectioning. - Also this should not be a heading. It should be a paragraph.
- For any decorative images, each
<h1 class="subhead">10k+</h1>
- Wrap all the page content inside a landmark. In this case, you can wrap it with
main
tag (This should fix the generated issue). - I would recommend making each
subdiv
to be ali
and wrapping allli
withul
. This will make your HTML markup more semantic. - Other
- Don't manually uppercase the text (unless you want it to be spelled by screen reader). Use CSS instead.
<p>COMPANIES</p>
I would recommend refactoring this code (do this challenge again), by following this guide:
- Try to learn and use
background-blend-mode
ormix-blend-mode
properties to create the purple overlay. - Don't use
float
in this case. You can use flexbox to make the card have two columns on desktop view. - Add
max-width
to the container or the card to prevent it become too large on the small or big screen size. You can see the issue by seeing your website on600px
width to1439px
and also>1440px
. - You can make the card perfectly on the center by using flexbox.
- This is obvious, but I would recommend seeing other people solutions if you get stuck or want to get an idea.
- (Best Practice) I would highly recommend naming your class in English and trying to follow BEM class naming convention.
That's it! Hopefully, this is helpful!
Marked as helpful1@priyankavasam7Posted almost 3 years ago@vanzasetia Thanks a lot! I didn't expect such a detailed explaination with resources to refer. I came to know blunders in my code. Thanks for going through my code and rectifying mistakes. I will do this challenge again based on your suggestions and improve it. Your feedback helped a lot😊😊
0@vanzasetiaPosted almost 3 years ago@priyankavasam7 You're welcome! Glad to know that it helped you!
0 - Accessiblity
- @byronbyronPosted almost 3 years ago
Could try using
background-blend-mode: multiply;
with a background image and the purple background color. Something like...<div class="card-image" style="background-image: url('image-header-mobile.jpg');"></div> .card-image { background-repeat: no-repeat; background-position: center background-color hsl(277, 64%, 61%); background-blend-mode: multiply; background-size: cover; padding-top: 74%; border-radius: 10px 10px 0 0; }
Then can position the background image to the right on desktop, so something like...
@media (min-width: 1440) { .card-image { position: absolute; top: 0; right: 0; left: 50%; bottom: 0; padding-top: 0; border-radius: 0 10px 10px 0; } }
https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode
Marked as helpful1@priyankavasam7Posted almost 3 years ago@byronbyron Thanks! I'm feeling very happy to recieve suggestions. I will try this code 😊😊
0 - @MojtabaMosaviPosted almost 3 years ago
AS mentioned above above your looking for something background-blend-mode.
Keep 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