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

html css

Moscow 420

@MOSCOW2022

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


Hello all so my only problem is the background wave i dont know how to do it if some one knows please let me know how

thank you for the answers!

Community feedback

Lucas 👾 104,420

@correlucas

Posted

👾Hi Moscow, congrats on completing this challenge!

Here’s some tips to improve your solution code:

The background wave image is missing and here’s the step-by-step to add 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-image: url(../images/pattern-background-desktop.svg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
    background-color: hsl(225, 100%, 94%);
    font-family: "Red Hat Display", sans-serif;
    background-size: contain;
    background-repeat: no-repeat;
}

✌️ I hope this helps you and happy coding!

Marked as helpful

1

Moscow 420

@MOSCOW2022

Posted

@correlucas thank you sir just did it

0

@Huzaifa1910

Posted

Hello Moscow!

I guess you should use a background image on the <body> tag in ur CSS by doing this you can easily apply your background image with this you also have to give some attributes like background-repeat: no-repeat; background-size: 123px; /whatever your size will be/ and you can also use shorthand don't worry it is not that hard

Happy Coding!

Marked as helpful

1

Moscow 420

@MOSCOW2022

Posted

@Huzaifa1910 thank you i just did it

1
Vanza Setia 27,795

@vanzasetia

Posted

Hello, Moscow! 👋

I can't access the repository at the moment. It looks like it is a private repository. If that's the case, make it a public repository.

For the background image, have you done some research on the internet? What is the technique that you have tried to show the background image?

0

Moscow 420

@MOSCOW2022

Posted

@vanzasetia yeah sorry i think my repositories are private,i'm gonna make them public for the upcoming challenges thank you for checking it ! and i just did the background image

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