Huddle landing page with alternating feature blocks
Design comparison
Solution retrospective
Hello all,
I have completed this huddle landing page challenge..any feedback to improve it further are most welcome.
Community feedback
- @ramsaysewellPosted over 4 years ago
Hi Abhijit,
Great job on this solution, it looks really good and responsive.
Here are a few tips for how we can make this look closer to the design:
- For the
.nav-logo
image, I would wrap this in it's own<div>
instead of using the<img>
tag as a Flex Item. This will help make sure that the<img>
retains it's aspect ratio and isn't stretched because of Flexbox. - The
.intro-header-box-flex
can have amax-width
set of around1200px
and thenmargin: 0 auto;
. This will make sure you keep the background stretched to the edges and the content is restricted to it's width, let me know if this works. - For the footer social images, these were given in your
/images
folder and so you should be able to insert the SVG into your HTML document, allowing you to change the fill property. Check out CSS-Tricks for help on styling SVGs.
I hope these tips are useful and none of it confuses you.
Let me know if there's anything I can help with.
Ramsay
1@abhijitmoryePosted over 4 years ago@ramsaysewell Hey thanks for your feedback..I really appreciate that..
I have made a changes as per your suggestion..however i am not able to change color of
svg
by usingfill: #ffffff;
.Thanks for your feedback.. it really means lot to me as new to this web development world, feedback from you keeps me motivated to pursue my dream of becoming a developer.
0@ramsaysewellPosted over 4 years ago@abhijitmorye
Could you try:
svg path { fill: #fff; }
When changing the colour of a SVG, you'll need to select the internal path(s). Also make sure that the SVG code itself doesn't have an inline fill property on the
<path>
.It would look like:
<svg><path fill="#000"></path></svg>
I hope this helps you out.
Let me know if you have any issues.
0@abhijitmoryePosted over 4 years ago@ramsaysewell
yes .. it worked!
Thanks to you for making this solution even better! .😀
0 - For the
Please log in to post a comment
Log in with GitHubJoin 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