Order summary component

👾Hello Kalhara, 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:

Your svg background is not displaying because you didnt indicate the correct location for the folder, here's the correct import background-image: url(../images/pattern-background-desktop.svg); you've missed ../ before the folder:

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

Use background-size: contain; to make the background have the correct sizing

Note that if you're using the folder locally the live server recognizes the image location, but with a live solution you need to indicate where the image is. Remember, when the image is inside the repository folder use dot slash ./ and if is inside a subfolder use dot dot slash ../ If the image is the same folder of the html without folder just add normal path.

✌️ I hope this helps you and happy coding!

Hello Kalhara Sandaruwan, how are you?

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

1- Heading levels should only increase by one click here

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

3- Page should contain a level-one heading, you could have changed h2 to h1 click here

I looked at your code and saw that you didn't upload the image to github, maybe that's why it's not showing up.

Hope it helps... 👍