Order Sumarry Card

Hey @Soytto,

Nice job on the project, it looks great!

I looked through your css file and noticed you selected some elements directly like so.

h1 { padding: 0.8rem ; font-size: 1.7rem; color: hsl(223, 47%, 23%); font-weight: 900; }

While this isn't an issue on smaller projects like this, I would highly advise against doing this, as it Will cause a Lot of headache on bigger projects.

Instead I would suggest you either select all of your elements with classes, or with classes and then the element like so.

.text h1 { padding: 0.8rem ; font-size: 1.7rem; color: hsl(223, 47%, 23%); font-weight: 900; }

This way only the h1 elements inside of the elements with the class of text will be selected rather than all of the h1 elements on the page.

Keep up the great work!

Greetings, Soytto! 👋

Nice work on this challenge! 👍

I have a few suggestions for this solution.

• Always specify the type of the button. In this case, set the type of them as type="button". It's going to prevent the button from behaving unexpectedly.
• Never limit the height of the body element. It will not allow the users to scroll the page if the page content needs more height. You can see the issue by looking at the site on mobile landscape view. So, my recommendation is to use min-height instead.
• Create a custom :focus-visible styling for any interactive elements (button, links, input, textarea). This will let people who use a keyboard to navigate the site know where they are currently on the page.

Hope this helps. 🙂