Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request failed with status code 502
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Order Summary [CSS Grid & Flexbox]

@clinto-bean

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


Hi all! Please provide me with any feedback you can.

I used Grid for the main 'card' container while I used flex-box for all the components of the 'card'.

Here are the things I am struggling with, still:

The background images do not display on github, although the relative filepaths are correct. When opening the file in live server, it works fine.

Other than that, I think I got pretty close! let me know how I did.

Community feedback

@Kamlesh0007

Posted

Congratulations on completing the challenge! Your hard work and dedication are truly admirable. As you continue to hone your skills, here are a few suggestions that may be helpful:

Keep practicing and learning new things. The more you challenge yourself, the more you'll grow as a developer. Seek feedback from others. It's always helpful to get a fresh perspective on your work and learn from constructive criticism. Collaborate with other developers. Working with others can help you learn new techniques and improve your coding skills. Again, congratulations on completing the challenge, and I wish you continued success in your coding journey! 😁

1

@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.

BROKEN iMAGE PATH 📸:

  • This image path is broken simply because of incorrect path, the styles.css is inside of css folder the pattern-image is inside of image folder.
  • So image folder is sibling of css folder, but the path you provided for patter-image in css is pointing from root of directory
  • We can quickly fix it by rectifying the style rule,
body {
  background-image: url("../images/pattern-background-mobile.svg");
}

@media (min-width: 500px)
  body {
    background-image: url("../images/pattern-background-desktop.svg");
  }
}
  • Now we properly assigned the image path

.

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

Happy 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