Order Summary Card

Hey, awesome work on this one. Layout in general looks great and it is responsive.

It is great that lots of other already gave their feedback on this, really really nice. Just going to add some suggestions as well:

• You don't need margin to center the content since it is not consistent right now for all users in terms of being centered. What you can do is that first remove margin on the main and on the body tag add:

    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;

This way it will be centered properly.

• Those decorative images on the site could have use an extra aria-hidden="true" attribute so that they will be totally hidden.
• Music icon is decorative only so hide it using the method I mentioned.
• Also when using alt attribute, avoid using words that relates to "graphic" such as "logo" and others. An img is already an image/graphic so no need to describe it as one.
• annual plan should be a heading tag since it gives overview on what the section contains.
• Also, when there is a text-content, always use meaningful element to wrap those and not only just span.

Aside from those, great work again on this one.

if you used bootstrap, then implementing the shadow should be easy. Use the class shadow-none(no shadow), shadow(faint shadow), or shadow-lg(really visible shadow) for different... shadow levels(don't really know the word). You should try looking up the css attribute for that.

Hey @peter-abah 👋🏻

I have some quick tips to fix the position of the button.

• Add these two lines to your button and you're done...almost 😃 All there's left to do is add :hover state. But I'll leave it to you as a challenge 🙃

width: 80%;
margin: .5rem auto;

• What comes to box-shadow, here is a list of awesome shadow by CSS Scan, but there are tons of resources, In Frontend Mentor where you can find CSS box-shadow generators.

I hope this was helpful 👨🏻‍💻 everything else looks good, great job for the first project. Cheers 👾

Few Suggestions:

• Use hover effects on button and link components as it is on design files. For that use :hover syntax on element in css.
• Make annual-plans component full width of the card..

Also What do you mean by replacing box-shadows ?