Design comparison
Solution retrospective
Hi! Thanks for viewing my solution. I would appreciate any comments about my code, including areas where you feel there would be an easier alternative. Feel free to compare your solution with mine as well!
Community feedback
- Account deleted
Hi JunWei
Nice work and congratulations on finishing the project. I am a newbie like you and see that you have some HTML issues in your code. There is a very good site for helping you correct your HTML code and they have one for CSS as well if you need it.
Marked as helpful1@junwei-tjPosted almost 3 years agoHi @madzi-hove! Thanks for bringing my attention to validator sites - they look really useful
0 - @MiculinoPosted almost 3 years ago
Congrats on completing the challenge, @junwei-tj!
It looks really good. I had a look at your final solution and I have a few suggestions that I hope will be useful to you:
-
Look into
background-blend-mode
andmix-blend-mode
properties for the image overlay effect -
On smaller screen sizes, consider adding more space in between the stats elements but reduce the space between them and the paragraph description
Marked as helpful1@junwei-tjPosted almost 3 years agoHi @Remus432, thanks for your suggestions! I have modified my code accordingly :)
0 -
- @darryncodesPosted almost 3 years ago
Hi JunWei,
Great solution, well done!
- you could try adding a solid
linear-gradient
to a background image:background-image: linear-gradient(hsl(277, 64%, 61%), hsl(277, 64%, 61%) ), url(../your/image-filepath);
this will help achieve the purple colour to match the design, rather than the overlay approach - you also need to explore
background-blend-mode
. (multiply
usually does the trick) - also i've noticed you've done a fair amount of styling with IDs, this isn't best practice. IDs are meant to be unique which means they can't be re-used like classes which would help you write less code also you can run into specificity wars
Happy coding 🤙
Marked as helpful1@junwei-tjPosted almost 3 years agoHi @darryncodes, thanks for the feedback!
Getting the correct purple shade was a real headscratcher for me, so your suggestion was really helpful. However, to get the background showing on mobile, I had to set a height value for
image-container-mobile
. I'm wondering if there is perhaps a better alternative.With regards to the use of IDs, I relied on them more often for this project since most styles were element-specific (though I noticed I accidentally used
id='image-overlay'
twice - I changed it to a class). Is this still considered bad-practice?0@darryncodesPosted almost 3 years agoyou're welcome @junwei-tj!
I think you've nailed the colour but over complicated your code. For example you don't need the
image-overlay
div
you could add the background image straight on theimage-container
div
. Also you don't need duplicate the html, just swap the image with a media query (this is how I approached it).I'd steer clear of styling with ID's yes, this article does a good job to explain further: Reasons not to use IDs in CSS
0 - you could try adding a solid
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