Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Order Summary Pure CSS

@mpgithubcode

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I had trouble implementing box-shadows and centering the background image.

I tried looking online but it seems that the background image has something to do with it and the settings of the surrounding divs

Community feedback

Lucas 👾 104,420

@correlucas

Posted

👾Hello @mpgithubcode, Congratulations on completing this challenge!

Here’s some tips to improve your solution code:

  • There is a best way to add this background and have more control over it. First of all add the image as a background inside the body this is the code for that: background-image: url(/images/pattern-background-desktop.svg);

Then you add background-repeat: no-repeat to avoid the background repeating and background-size: contain to make it fit full width and center with the card this is the best choice, but an alternative to resize it is to use background-size: 125%,

body {
    background-size: contain;
    background-image: url(/images/pattern-background-desktop.svg);
    background-repeat: no-repeat;
}
  • To create box-shadows without writing the code you can use Figma and create the shadow design or use an online tool to create the shadow and then copy the code without writing any code: https://www.cssmatic.com/box-shadow

✌️ I hope this helps you and happy coding!

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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