order-summary-component-main Grid flex -beginner

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  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 properly set yet, So let me share my css snippet which helps you to easily apply the background color with the background svg they provided to place perfectly as same as design.

  ---

  • Add the following style rule to your css, and then experience the changes

  body {
  background: url(./images/pattern-background-desktop.svg) no-repeat, #E1E9Ff;
  background-size: contain;
  }
  

  ---

  • 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

  0

  ---

  

  DESELMAAR•280

  @DESELMAARPosted over 1 year ago

  @0xAbdulKhalid yes thank you a lot , y gave me a nice help , it's nice now ,thnx ;)

  0
• 

  hitmorecode•6,360

  @hitmorecodePosted over 1 year ago

  Congratulations well done. Just a few pointers

  • Avoid doing this inside the html, you can use style inside the html, but that's not good practie.
  • If you do use style inside the html, you don't have to repeat style multiple times. One style tag will do the work, but try to avoid this, place CSS things in the stylesheet.
  • You don't have to import the font family multiple times because of different font weights. You can do this in one go.
  • To fix your background image change background-size: cover to background-size: contain

  When you are on the google fonts page ,search the font(s) that you want add the styles that you want. Google fonts page will create one string with all the information you selected. If you want to import, just copy this in the import section. If you want to add to the html, just copy this in the link section.

  Marked as helpful

  0

  ---

  

  DESELMAAR•280

  @DESELMAARPosted over 1 year ago

  @hitmorecode thank you a lot , nice points that helps me a lot thank you again ;)

  0