Html/css

Community feedback

• 

  Adriano•38,270

  @AdrianoEscarabotePosted about 2 years ago

  Hi @Msarthaksharma, how are you?

  Congratulations on completing this challenge, welcome to the front-end mentor community. I have a few tips that I think you will like:

  1- I noticed that you put the image directly in the html, try to put it directly in the css, because we can have more control over it. You could do it like this:

  `body { background-image: url(image) no-repeat; }

  2- I noticed that you used absolute position to center the content, prefer to use display: flex;, I'll leave a link for you to read about: click here

  The rest is really good! Hope it helps... 👍

  Marked as helpful

  0

  ---

  

  Sarthak Sharma•50

  @MsarthaksharmaPosted about 2 years ago

  @AdrianoEscarabote Hi, I am good, how are you?

  Yes, i will try to put it in the way you mentioned.

  I will try learn more about positions, I am very bad in fixing a position and margins.

  1

  

  Adriano•38,270

  @AdrianoEscarabotePosted about 2 years ago

  @Msarthaksharma im good, keep coding bro

  Marked as helpful

  1
• 

  Enmanuel Otero Montano•2,155

  @Enmanuel-Otero-MontanoPosted about 2 years ago

  !Hello Sarthak!*

  First of all, you should correct the way you inserted the background image. That image is merely decorative, it is not important for the content of the page, it does not offer any information, so for all the correct way to insert it is through CSS with the "background" property, I will leave you a link below to the official documentation about the "background" property. In this case "background-image" must be applied to the body.

  To align and center elements you could use the "flexbox" and the margins can be left to give space between elements.

  You must also make the page responsive using "media queries", since it does not display correctly on mobile devices.

  flexbox

  background-image

  media queries

  Keep coding!🦾🦾🦾

  Marked as helpful

  0

  ---

  

  Sarthak Sharma•50

  @MsarthaksharmaPosted about 2 years ago

  @Enmanuel-Otero-Montano Hi Thank you so much for you feedback and I hope to learn alot from you. I will definitely try to implement the suggestions you gave. It means a lot to me. Please stay in touch and help me with your suggestions, have a good one. Thanks again!

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  Hello Shartak, congratulations for your solution!

  Something you can improve here is the semantics and the colors, for the semantics you improve the markup replacing the div with main and h2 with h1 and remember to increase ever only one level for each heading.

   <h1>Order Summary</h1>

  About colors, when you download the project files there’s a file called style-guide.md where you can find information such as hsl color codes and the font-size for the headings. The correct value for this shadow is box-shadow: 5px 5px 15px 5px rgb(0 0 0 / 3%);

  Hope this helps, happy coding

  0