Order-Card

Hello Favor Ejiofor, how are you?

I really liked the result of your project, but I have some tips that I think you will like:

1- Document should have one main landmark, you could have put all the content inside the main tag click here

2- Page should contain a level-one heading, you could have changed h3 to h1 [click here](https://dequeuniversity.com/rules/axe/4.3/page-has-heading-one? application=axeAPI)

I noticed that the background image is dropping a lot at higher resolutions, to fix this we can do the following:

body { background-size: 100% 50vmin; }

the rest is great! Hope it helps... 👍

👾Hello Favour, congratulations for your new solution!

🎉 Nice solution and nice code! I can see that you paid a lot of attention to your code/design. If you don’t mind I’ve some tips for you:

1.Its not so good that you used overflow: hidden for the whole content, in this case this property is making the content get cropped when the component gets tiny. Instead of using overflow to make the rounded borders use border-radius for each card.

2.Your solution is fine but if you note after max-width: 350px the pricing content start to pop out the container, to fix that you can use a media query to make the price content goes to different rows

@media (max-width: 350px) {
.music-section {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
}

✌️ I hope this helps you and happy coding!