Summary reaction page

Hey there, your solution looks great! Congrats on that.

Regarding responsiveness, you could add a media query for mobile devices and make flex-direction: column;

E.g.

@media (max-width: 500px) { main { display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 1.5rem; box-shadow: rgb(0 0 0 / 10%) 100px 0px 100px 1px; } }

Hope you find this feedback helpful!

Great job on your project! Regarding your question on accessibility, you nailed it! You used main, section, h1, h2, h3 and footer, which really improve accessibility compared to plain div elements. Your icons have alt text for screen readers, too. One thing that could be improved, is for your button, add cursor: pointer to further indicate it's an interactive element.

A small suggestion would be to take a look at the example and see where the 'Your Result' and 'Summary' headings are, they could use a little top-margin to scoot them down. And look at the results in the summary section, the icon/category are on the left and the score is on the right side of the box (I'd check out other options for justify-content and see if you can get the space sorted). I had to get nitpicky for constructive feedback because you did such a good job! :)