Social proof section solution - (HTML5, Css3, Flexbox) [I'm Fabra]
Design comparison
Solution retrospective
In the course of the solution I thought to somehow make the structure of the stars (score) from css using (background-image), but the final result was not good, in what way could they do it and without using javascript?
Note: the idea of this is to keep HTML as clean as possible.
Community feedback
- @FarisPalayiPosted over 3 years ago
It's simple, you can use
background-imageandbackground-repeattogether to achieve that. But a drawback with that is that there is no concept of padding or margin to background images so, in order to give it appropriate spacing, you might have to edit the image a bit. Since here it's an svg you can easily do that by using figma or inkscape or illustrator or any other svg editing software.Your solution looks nice btw👍
Have fun coding ✨
Marked as helpful2@imfabraPosted over 3 years ago@FarisPalayi I tried as you indicate and you are right when you refer to margins and fills. It had not occurred to me to modify the SVG, so I will give it a try.
Thanks for the advice.
1
Please log in to post a comment
Log in with GitHub
Join 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