Order Summary Component Challenge [ Responsive ]

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @dubeyaditya29 👋🏻

  I have some suggestions to help you fix the accessibility, HTML and some other issues.

  • In your markup, <div class="container">...</div> should be <main class="container">...</main> and <div class="attribution">...</div> should be <footer class="attribution">...</footer>.
  • This image <img src="/images/illustration-hero.svg"> must have an alt tag that describes the image. These will fix the accessibility issues. Don't forget to generate a new repot once you fix the issues.
  • However, the music icon, should have aria-hidden="true”, because it's for decoration. You can read more about aria-hidden here.
  • Perhaps, you forgot to include font-family, you can find it in style-guide.md file.
  • Now let's fix the background, check out the following snippet:

  body {
      background-image: url("/images/pattern-background-desktop.svg");
      background-repeat: no-repeat;
      background-size: contain;
      background-color: #e0e8ff;
  }
  

  this will make the background to look closer to the original design.

  I hope this was helpful 👨🏻‍💻 One last suggestion, try to implement :hover on the button and links. Other than that, you did a good job for the first project, keep it up. Cheers 👾

  Marked as helpful

  1

  ---

  

  aditya dubey•30

  @dubeyaditya29Posted about 3 years ago

  @kens-visuals Hi 👋 Kens Thankyou for reviewing the project I will make the corrective changes. Completely neglected the style guide had hard times matching those colors on internet my bad!. I didnt understood this line of yours "Don't forget to generate a new repot once you fix the issues." can you explain it once again. Thanks :)

  0

  

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  @dubeyaditya29 you're welcome. When you fix an issue, that's been reported in reported beneath your solution, and push it to your GitHub repository, Frontend Mentor doesn't automatically fix those. So you need to go View Report and in the top right corner there's a button that says Generate a New Report, click on it, so the fixed issues take place and clear the report.

  Marked as helpful

  1

  

  aditya dubey•30

  @dubeyaditya29Posted about 3 years ago

  Thanks alot @kens-visuals :)

  0

  

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  @dubeyaditya29 no problem 😇

  0
• 

  ezequielmagi•60

  @ezequielmagiPosted about 3 years ago

  Hey! how you doin? be carefull with the background repeat ;-)

  Marked as helpful

  1