Order Summary Card test1

Community feedback

• 

  Gregorio Rodriguez•400

  @thekindbard

  Posted over 3 years ago

  you have to set border-radius to the image, like border-radius: 1em 1em 0 0; Another improvement is set :hover animation to the bottom.

  11

  Marked as helpful
• 

  P

  Ken•4,915

  @kens-visuals

  Posted over 3 years ago

  Hey @oswhyteknits 👋🏻

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

  • In your markup, <div class="container">...</div> should be <main class="container">...</main> and <div class="attribution">...</div> should be <footer class="attribution">...</footer>. These will fix the accessibility issues. Don't forget to generate a new repot once you fix the issues.
  • Hero image should have a display: block;, it removes the line underneath the image. If you want to know what's causing it, check out the 3rd section of this video.
  • Next, I suggest using <h2> or <p> instead of <h5>, because headings in HTML have to increase gradually, such as h1, h2, h3….
  • For the music icon, add aria-hidden="true”, because it's for decoration. You can read more about aria-hidden here. To illustrate:

  <img src="images/icon-music.svg" alt="" aria-hidden="true”>
  

  • In order to fix the border-radius just add overflow: hidden; to .container.
  • Also, I suggest implementing :hover state, which you can find in design folder active-state image, after you implement it you can also add transition: all 0.2s; to the button and the links, this will make :hover smoother.
  • Lastly, let's bring the card to the center of the screen, so I made a couple of changes in body:

  body {
      background-image: url(images/pattern-background-desktop.svg);
      font-family: Helvetica, sans-serif;
      font-size: 16px;
      text-align: center;
      margin: 0;
      width: 100%;
      background-repeat: no-repeat;
      background-size: contain;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #e0e8ff;
  }
  

  I hope this was helpful 👨🏻‍💻 other than that, you did a great job for the first project, keep it up. Cheers 👾

  10