card

Community feedback

• 

  Eray•1,410

  @ErayBarslanPosted over 2 years ago

  Hey there, congrats on your solution, nice work! Some suggestions:

  • I take it that you wanted to choose your own colors. I think I can suggestion regarding this is, you should be careful to not use dense color tones for your background. Because it takes the focus away from the card and tires the eyes. If you wish to use cyan tone you can lower the opacity and that'll do it. You can play around with it or use rgba(0, 255, 255, 0.15)
  • It would be better to not give margin to body, if you wish to align the card to the center you can use flex or grid like:

  html {
    height: 100%;
  }
  
  body {
    min-height: 100%;
    display:grid;
    justify-content: center;
    align-items: center;
  }
  

  • For semantic markup you should use landmarks as containers. For you case without effecting the design you can change container divs as: <main class="main-section">...</main> and <footer class="attribution">...</footer>
  • If the page has one <h1> it'll result in better SEO. So you can change <h2> of Order Summary to <h1>. Also instead jumping to <h4> it's better to change the level one by one so using <h2> for Annual Plan would be better. If you need to change the size, you can choose to style from CSS. These are my suggestions to improve the solution. Great work with your solution and happy coding :)

  0