Design comparison
Solution retrospective
Hi,
I want you to please check margins, width, positions. I found that I was writing unnecessary code and re-entry. Please share reviews it will be great help for me to improve.
Community feedback
- @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 helpful0@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@AdrianoEscarabotePosted about 2 years ago@Msarthaksharma im good, keep coding bro
Marked as helpful1 - @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.
Keep coding!🦾🦾🦾
Marked as helpful0@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 - @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 ashsl color codes
and thefont-size
for the headings. The correct value for this shadow isbox-shadow: 5px 5px 15px 5px rgb(0 0 0 / 3%);
Hope this helps, happy coding
0
Please log in to post a comment
Log in with GitHubJoin 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