Skip to content
Submitted almost 5 years ago

Responsive Landing Page with CSS Flexbox and Grid

Tim Jenkins•145
@tjenkins
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with alternating feature blocks
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

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.

Community feedback

  • Matt Studdert•13,611
    @mattstuddertPosted almost 5 years ago

    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! 🙂

    0
    Tim Jenkins•145
    @tjenkinsPosted almost 5 years ago

    Thanks for the tip @mattstuddert. I didn't know about the filter property. Very useful!

    0
    Matt Studdert•13,611
    @mattstuddertPosted almost 5 years ago

    @tjenkins you're welcome. Yeah, the filter property is great! There's so much you can do with it.

    0

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