Skip to content
Submitted almost 3 years ago

Dev Chall using SASS, Grid, Flex and responsive (except for section4)

sass/scss
Zoulanders•380
@AlexDDevv
A solution to the Huddle landing page with alternating feature blocks challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello ! Was a great challenge to do, but I had some difficults to do the responsive for the last section (I didn't do it :() with the position absolute. For the footer's logo, I didn't know how to change the svg color, so I put a background (it's ugly but we can see the logo lol) If you have some tips for this, I take it all ! Have a good week !

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    Hi, Zoulanders! 👋

    To change the SVG you need to change the value of the fill property to white color. I recommend using inline SVG for the logo. Then, find all the fill properties and change all the values to #fff.

    After that, since it is a meaningful SVG, we need to add some alternative text to make it accessible to assistive technology such as screen readers. Add role="img" and put a title tag inside the svg.

    <svg role="img">
  <title>Huddle</title>
</svg>

    Then, for section4, I recommend using relative positioning instead. You can see my solution to see how I did it.

    Lastly, there should not be two h1 in the same page and h6. I recommend reading the "How-to: Accessible heading structure - The A11Y Project" article to learn how to use headings correctly.

    That's it! I hope this information is useful!

    Marked as helpful

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