Flexbox, CSS grid

Community feedback

• 

  Rio Cantre•9,650

  @RioCantre

  Posted over 3 years ago

  Hello there! Good job in completing this project! Viewing at your solution, I would recommend the following for you...

  • Wrap the whole content of container with specific tag like main and attribution with footer tag. For HTML structures, refer it with this one Semantics
  • Instead of wrapping the button with footer, use div or use it as it is. Refactor this part into...

  <div>
          <button class="payment-button">Proceed to Payment</button>
          <button class="cancel-button">Cancel Order</button>
  </div>
  <footer class="attribution">
      ....
  </footer>
  
  

  • Include description with the alt in img tags
  • Switch the background svg in the container, use the mobile version in the media query. Alternative is to add it on the body rule set
  • Simplify margin: 1rem 1rem; into margin: 1rem; in .pricing-info rule set
  • Import the attribution style in CSS file and remove style tag

  Above all, you did good! Hope this helps and Keep it up!

  21

  Marked as helpful
• 

  Naveen Gumaste•10,420

  @NaveenGumaste

  Posted over 3 years ago

  Hay ! AnaesthCode Good Job on challenge

  These below mentioned tricks will help you remove any Accessibility Issues

  -> Add Main tag after body <main class="container"></main>

  ->The main element must not appear as a descendant of the section element.

  -> Learn more on accessibility issues

  If this comment helps you then pls mark it as helpful!

  Have a good day and keep coding 👍!

  10

  Marked as helpful
• Account deletedPosted over 3 years ago

  Hi there 👋

  Congratulate on finishing your project 🎉. You did a great job 🔨

  I give some suggestions that I hope help you take your project design to the next level 📈.

  • Let's add some box-shadow to the .card in CSS 👍
  • Your hover effect of a button is already working great 🚀. You can add also a transition to it. For more information check out MDN docs 🔗

  Happy coding ☕

  Maqsud

  10

  Marked as helpful