Skip to content
Submitted over 5 years ago

Responsive Landing Page with CSS Flexbox and Grid

Tim Jenkins•145
@tjenkins
A solution to the Huddle landing page with alternating feature blocks challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I couldn't figure out how to use the same svg for the pink/black logo in the header and the white logo in the footer. Is there a way to style the logo.svg image to make it white? It seems like it should be possible, but I couldn't figure it out. Instead, I ended up making a copy and changing the fill attribute within the svg itself to use in the footer.

Code

Please log in to post a comment

Log in

Community feedback

  • Matt Studdert•13,611
    @mattstuddert

    Awesome work on this challenge, Tim! For the logo image in the footer, you could either add a filter property to change how it looks, like this: filter: grayscale(1) brightness(0) invert(1);. Or you could embed the actual SVG code in the HTML and use footer svg * { fill: white} in your CSS.

    I hope that helps. Keep up the great work! 🙂

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