Order Summary Component with HTML, CSS, & Flexbox

Amazing work Aliaa! Not bad for a first challenge. Keep it up!

For the images problem, it's because of the URL you're using:

• http://127.0.0.1:5500 is a URL only accessible on your machine when you were running the http server (Using Live Server Vscode extension?).
• file:///Users/... is a URL used to access files on your local filesystem (Mac in this case) and is again specific to your system and won't work elsewhere.

So the fix for this is to use a relative URL, in your case it's gonna be ./images/<image name>.

As for the rest I only have 3 suggestions:

• Every html page should have a level 1 heading h1 that describes the main content of the page.
• Consider using semantic html elements instead of generic divs where appropriate, for example the "Cancel" text can be inside a a or a button element because it conveys that it can interacted with.
• Check the accessibility report page for more.

Good luck to you!

Hi! Good job. I noticed you used:

background-image: url(file:///Users/aliaagabllah/Desktop/Projects/Order_Summary_Component%20_Project/images/illustration-hero.svg);

in your CSS. That's why you can see it in your computer, but we can see them in the github page. You need to use:

background-image: url("./images/illustration-hero.svg");

Because you uploaded the images folder and the .svg to your repo.

Keep coding!