Skip to content
Submitted over 5 years ago

mobile first (CSS-Grid, Flexbox + SCSS)

Alex•1,090
@AlexBueckig
A solution to the Bookmark landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

So... Since there were a few svg-icons on this site which change colors depending on e.g. hover state I'd like to know what the best practice would be to do that.

I created several versions e.g. of the logo "colorful logo + white text" and "white text + white logo" to exchange them when needed using classes with different background urls.

Would it be better to copy + paste the whole content of the svg into the actual html and use css to change the fill color? Even though it means having the same code in the html-file several times?

Code

Please log in to post a comment

Log in

Community feedback

  • Matt Studdert•13,611
    @mattstuddert

    Hey Alex, great work on this. Your solution looks awesome and functions really well vs the project brief.

    For the SVG icons, I would go with the embed option personally. This lets you treat the SVGs like any other HTML element and manipulate the styles using CSS, as you mentioned.

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