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 (pure css, bem methodology)

Gomen 120

@Leviakc

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


This is my third project on Frontend Mentor, and I believe I have improved in many areas. This component was created using only pure CSS, and I would greatly appreciate any feedback.

Community feedback

@0xabdulkhaliq

Posted

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

BACKGROUND iMAGE 📸:

  • Looks like the background svg has not been set, let me explain How you can easily apply the background color with the svg they provided.
  • Add the following style rule to your css, and then experience the changes
body {
    background: url(./images/pattern-background-desktop.svg), #E1E9Ff;
    background-repeat: no-repeat, no-repeat;
}
  • Tip, Don't forget to generate a new screenshot after editing the css file

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Marked as helpful

1

Gomen 120

@Leviakc

Posted

@0xAbdulKhalid Thank you, I didn't notice the svg file haha so I just updated it

0
Hassia Issah 50,670

@Hassiai

Posted

To center .product on the page using grid, add min-height:100vh to the body and the there is no need to give the body a margin value.

Give the body a background-image with a background-size of contain a background-repeat of no repeat .

In the media query you have to change the background-image of the body

The background-images can be found in the images folder in the zip folder you downloaded.

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Marked as helpful

0

Gomen 120

@Leviakc

Posted

@Hassiai it was helpful I didn't notice the svg file in the zip folder c: I still need to change a few things, thanks!

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