Order summary component with Flexbox

Community feedback

• 

  Chisom Ogbonna•380

  @MavreonPosted over 2 years ago

  Also here's a few pointers to help with your HTML validation issues and accessibility issues:

  In order to resolve some of your accessibility issues, you might wanna use landmarks in your html code, these help browsers easily navigate your code. So you might consider wrapping your divs in landmarks like <main> or <header> or <footer> you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link. You might want to add labels to your form input elements, this enables the browser to properly identify the input elements within your form and it's also beneficial to people with using screen readers. Happy coding and keep up the good work👍

  Marked as helpful

  2

  ---

  

  Chi Karl Junior•40

  @chikarlPosted over 2 years ago

  @Mavreon Thanks

  0
• 

  Chisom Ogbonna•380

  @MavreonPosted over 2 years ago

  Hello Chikarl, Great job on this, just a few things I noticed:

  1. Your card isn't centered and you can make that possible by adding display: flex; to the body block in your CSS file, which should center it.
  2. You don't need a div element wrapping around an anchor element to give it a button look. Only the anchor element with some width, padding, and background color should do it. For instance, taking .proceed-button as the class of an anchor element.

  .proceed-button{
              color: $color-white;
              background-color: $color-bright-blue;
              //Fill width of the parent element...
              width: 100%;
              padding: 20px 0;
              border-radius: $value-border-radius;
              box-shadow: 0 10px 20px rgba(1,1,1,0.25);
  }
  

  3. You forgot to handle the hover state of the anchor elements. If you don't know how to do that here is an example using my previous expression...

   .proceed-button:hover{
              background-color: $color-desaturated-blue;
              text-decoration: none;
  }
  

  Also, don't forget to add a transition property to the .proceed-button for a smooth transition on hover state, like this...

  .proceed-button{
              //Other property statements...
              transition: all 0.1s ease-in;
  }
  

  I hope you find this helpful ✨ Happy coding 🎉

  Marked as helpful

  1

  ---

  

  Chi Karl Junior•40

  @chikarlPosted over 2 years ago

  @Mavreon Thanks I am going to try it out

  1