Normal static component site with HTML and SASS with BEM & flexbox

Community feedback

• 

  darryncodes•6,370

  @darryncodesPosted about 3 years ago

  Hi Swan-yee-tun,

  Great solution, I think you've created a perfect match to the design - well done!

  Some considerations from me:

  • add background-size: 100% auto; to .main-container to ensure the background images covers the whole screen on larger screens
  • add cursor: pointer; to your payment and cancel buttons
  • semantically the buttons should be <button> tags
  • if you change <div class="main-container"> to <main class="main-container"> you'll fix your accessibility report

  All the best!

  Marked as helpful

  1

  ---

  

  Swan-Yee-Tun•225

  @developedBySwanPosted about 3 years ago

  @darryncodes Thanks for your feedback and giving time. This help a lot. I will fix ASAP.

  0
• 

  Nguyen Duy•245

  @koalalikecodePosted about 3 years ago

  It's a great solution. And I think it will be better if you use the main tag in this code: <div class="main-container"> for make the landmark clearly. And your background-image can use this for 100vw: main-container { background-size: cover;(work with contain too) }

  1

  ---

  

  Swan-Yee-Tun•225

  @developedBySwanPosted about 3 years ago

  @koalalikecode Thanks this is helpful feedback dude . I will fix it.

  0