Submitted over 4 years ago

Responsive Landing Page with CSS Flexbox and Grid

Tim Jenkins• 145

@tjenkins

Preview site View code

This is a solution for...

Huddle landing page with alternating feature blocks

HTML
CSS

2junior

View challenge

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

@mattstuddert

Posted over 4 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! 🙂

Tim Jenkins• 145

@tjenkins

Posted over 4 years ago

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

Matt Studdert• 13,611

@mattstuddert

Posted over 4 years ago

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

Please log in to post a comment

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