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 component

@HelenJonathan

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


Getting the right background image for this task was a little difficult for me.

Community feedback

Kenisa 90

@KenisaRenee

Posted

Hi Helen, great job on finishing your first challenge! I see you have box-sizing: border-box; and margin: 0; set for everything so good job. I'm pretty new to this too, and it took me a while to figure out the necessity of those. For me on this project, it helped to get the background just right by adding background-position: top; and background-repeat: no-repeat; under body. There might be other ways to do it, but that worked for me!

Anyway, you're doing awesome. Happy coding!

1
Warren 630

@warrenlee

Posted

Hi HelenJonathan, you are almost there!

With the CSS background property, you can define the background position, background size and decide if the background should repeat or not and also add some background color.https://www.w3schools.com/css/css_background_shorthand.asp

You try extending your property a bit by setting the background position to top, set background repeat to no-repeat and add a background color to finish off.

1
Tochi 190

@tchydy

Posted

Hello Helene, You really did well with the project. I know how it can feel to have one tiny thing go wrong with your code. But I am glad I can help you out on this becaue I just finished this challenge as well. Here is what I did. In the HTML file inside the main container I added a div with class bg-pattern to be postion: absolute; while the container was postion: relative; Next in CSS for desktop I set the class .bg-pattern: url(./images/pattern-background-desktop.svg) no-repeat; while for mobile I used another background. You view my Live site here https://tchydy.github.io/order-summary-component-main/ Hope you find this helpful! Stay Happy, Stay Coding!

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