Order summary component using HTML & CSS

nice work Ralph your design is not in the center of the page to centralise you design you can use flexbox on the body to centralise something like body { display: flex; justify-content: center; align-item: center; }

Hello Raph,

The design of your card looks great. :)

You need to include the following code in the body.

body {
  background-image: url("../images/pattern-background-desktop.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

1. Since your css file is in a folder, you have to set the image path with ../ that states that the image is located in the folder one level up from the current folder.

2. Using background-size: contain; makes the entire image fit to the background space.

Hi, @RalphJnr.

The background-image isn't showing because your "styles.css" is inside a folder. So, you have to add ../ at the beginning of your path (url) to go back a directory.

The way you're doing it, it's trying to find a images/pattern-background-desktop.svg inside the folder "css".