Order Summary Challenge using on HTML and CSS

Solution retrospective
I'm not sure about the mobile version, it looks the same as desktop.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Nantue
hello @sisart003, thanks for your like,
your card looks great 👏
You could add the color and the image together in one line with this code.
background: hsl(225deg, 100%, 94%) url(images/pattern-background-desktop.svg) no-repeat top/contain;
no repeat: it is so that the image is not repeated.
top: so that the image is on top.
contain: so that the image fits inside the container without losing its original proportion.
and adjust it with the background size: using vw (viewport width) and vh (viewport height).
- P@danielmrz-dev
Hello @sisart003!
Your project looks really good!
I just have one suggestion:
- You can use both
background-color
andbackground-image
together on the body. They will not cancel each other. Do it like this:
background-image: url(./images/pattern-background-desktop.svg); background-repeat: no-repeat; background-size: contain; background-color: #E1E9FF;
I hope it helps!
Other than that, great job!
- You can use both
- @Ezekiel225
Hey @sisart003
Your solution looks great but try this
body { justify-content: center; background-color: hsl(225, 100%, 94%); min-height: 100vh; }
I hope this helps. Your solution looks great. Happy coding.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord