Single Price Grid Component Master responsive made with SASS and BEM

Community feedback

• 

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  Nice! 🙌🏻

  I would also add some transitions for active states (when colors change on hover). It creates more interactivity and makes the project looks cooler. Active states can be done on buttons, links, titles which act like links or anything else, you choose.

  You can read more about it here, in case you haven’t done much of it:
https://www.w3schools.com/css/css3_transitions.asp

  IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩

  Marked as helpful

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  Hi, Alan!

  It is good to know that you want to learn about animations. I recommend also learning about the prefers-reduced-motion media query. This will allow you to only have the animations available for the users who choose to see them.

  I have some recommendations to improve this solution.

  • There should not be text in <span> and <div> alone. Wrap the text with a meaningful element like a paragraph element.
  • Remove all <br> elements. Don't use it only to make the text move to the next line. Most of the time you want to let the lines wrap where they need to. Learn more — <br>: The Line Break element - HTML: HyperText Markup Language | MDN #accessibility_concerns
  • For the "Why us" section, replace the <p class="article__p why-us__p"> with <ul> instead. Then, wrap each text with <li>. If the site does not have styling, then this content should be rendered as a list.
  • <button>element must always havetype` attribute to prevent unexpected behavior. Source: Checklist - The A11Y Project #use-the-button-element-for-buttons

  I hope my feedback helps.

  Marked as helpful

  0