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

Responsive page using CSS and HTML

slasher314β€’ 20

@slasher314

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


After sometime, i made the copy page. It still have a few little problems, the font isn't thick in some texts and etc. Altrough i guess i made a good job copying it.

Community feedback

darryncodesβ€’ 6,410

@darryncodes

Posted

Hi Slasher,

I think you should be pretty proud of this design, all the elements are there and it looks like a close match.

With a few small tweaks it could be perfect:

  • you should add background-repeat: no-repeat; background-size: 100% auto; to your <body> styles
  • you could center your design by adding display: flex; justify-content: center; align-items: center; min-height: 100vh; to the body too
  • you could clear down your accessibility report too if you add alt-text to your images and swap <div id="caixa"> for a <div id="caixa">

Hope that helps!

Marked as helpful

1

slasher314β€’ 20

@slasher314

Posted

@darryncodes i apreciate your comments and i will use them in the future. But i really dont get the last one, Can you explain It better??

0
darryncodesβ€’ 6,410

@darryncodes

Posted

oh sorry @slasher314 i forgot to update it: swap <div id="caixa"> for a <main id="caixa">. You should use a <main> tag.

Hope that helps πŸ˜…

Marked as helpful

1
slasher314β€’ 20

@slasher314

Posted

@darryncodes helps a Lot! Hahahhaa Thank you!

1
P
Remus D. Buhaianuβ€’ 3,145

@Miculino

Posted

Good job on completing the challenge, @slasher314 !

I have a few suggestions that I hope will be useful to you based on your final solution:

  • Add background-repeat: no-repeat to your body so the background image doesn't repeat itself

  • Try vertically centering your design https://www.youtube.com/watch?v=njdJeu95p6s&ab_channel=Fireship

  • Add some more vertical padding to the "Proceed to payment" button

  • Adjust the box-shadow for the "Proceed to payment" button. The x and y offset are too high and the blur value should be higher

  • On smaller screen sizes, you should reduce the card's dimension a bit. Also, at around 390px resolution, you can see the card isn't horizontally centered so try to fix that as well

Hope this helps. Keep up the great work!

Marked as helpful

1

slasher314β€’ 20

@slasher314

Posted

@Remus432 thanks you i didnt realize the lack of the vertical alignment and about the box shadow i really cant realize yet How to know specifilly the mesures of It. Thank YOU!

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