Skip to content
Submitted about 2 years ago

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

Zoulanders•380
@AlexDDevv
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

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 !

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted about 2 years ago

    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
    0
    Zoulanders•380
    @AlexDDevvPosted about 2 years ago

    Hey ! Thank you for your comment, I will work on that !

    0
    Vanza Setia•27,775
    @vanzasetiaPosted about 2 years ago

    @AlexDDevv No problem! 👍

    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