Result Summary Component with Hover Component

1. Actually you should use semantic tags to make it more accessible

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content. Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

2.Yes the solution is pretty responsive

3.code is organised well and easy to read. kindly go thru the BEM resource https://css-tricks.com/bem-101/

4.The layout is good and the solution is awesome.Kudos

Hello @rohmatsetiawanmta. I hope you're fine.

You must use semantic tags to make it more accessible.

Your code is organized well and easy to read, but your layout is not responsive when it comes to size 750px due to:

1- You remove the width 100vw on line 50:

.app { background: var(--very-light-blue); height: 100vh; display: flex; justify-content: center; align-items: center; }

2- You remove the display block and put height auto on line 200:

@media screen and (max-width: 750px) { .app { background: white; height: auto; } }

With these changes, your website is responsive for any screen.