Submitted

Responsive page using CSS and HTML

@slasher314

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View Challenge

Design Comparison

SolutionDesign

Report

4

Accessibility Issues

4

HTML Issues

View Report

slasher314’s questions for the community

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

P

@Remus432

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

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

darryncodes 5,170

@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

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 5,170

@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

Posted

@darryncodes helps a Lot! Hahahhaa Thank you!

1

Give some feedback to @slasher314 about their solution...

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!