Order-Summary-Component

👾Hello Fatima, Congratulations on completing this challenge!

Here's some tips to improve your code:

To improve your component overall responsiveness, something you can do its to create a media query to save space in the pricing section to make each information in a different row. Here’s the code for this media query.

@media (max-width: 350px) {
.main-subcontent {
    display: flex;
    margin-bottom: 30px;
    flex-direction: column;
}
}

Your background is applied but its not too similar to the design yet. Add background-size: contain instead of background-size: cover to make it display the size full width and center with the card vertically. Note that now is slightly different from the challenge design.

body {
    background-repeat: no-repeat;
    background-image: url(images/pattern-background-desktop.svg);
    background-position: top;
    background-repeat: no-repeat;
    background-color: var(--clr-paleblue);
    font-family: var(--ff-hat);
    display: flex;
    justify-content: center;
    background-size: contain;
    align-items: center;
    min-height: 100vh;
}

✌️ I hope this helps you and happy coding!

Hello Fatima Zahir, how are you?

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

I noticed that the content is not centered, to fix it I did the following:

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

I noticed that you forgot the background image, to put it in the body, we can use the background-image property. for example:

body {
    background-image: url(nameoftheimage.png);
    background-position: top;
    background-repeat: repeat-x;
}

The rest is great!!

Hope it helps...👍