Single price grid component

Hello there 👋. Good job on completing the challenge !

I have other suggestions about your code that might interest you.

• Use <ul> and <li> for the content under "Why Us": Since the content is a list of items, it's more semantically correct to use an unordered list (<ul>) and list items (<li>) instead of using paragraph (<p>).

• Always avoid skipping heading levels; Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy. Source 📘

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!

Hello @osmanbay90!

Your project looks great!

I noticed that your card is not centered, so here's two ways for you to do it:

You can apply this to the body (in order to work properly, you can't use position or margins):

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

Or you can apply this to the element you wanna center (works well with projects with only one centered element, like this one):

.element {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

• Also, avoid using percentage values for the card's width. This can make it overgrow and sometimes cause bugs. Use max-width instead with a fixed value, so your card will remain responsive, but it'll grow only until a certain point.

I hope it helps!

Other than that, great job!

this is really good