Submitted over 2 years ago

Order Summary page with html and css

El-karece Asiedu• 20

@KareceA

Preview site View code

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

how can I make this more interactive with javascript

Community feedback

darryncodes• 6,430

@darryncodes

Posted over 2 years ago

Hi El-karece,

Great solution, well done!

A few suggestions from me:

try adding this to your background: background-repeat: no-repeat; background-size: 100% auto; background-color: #e0e8ff;
remove this height: 520px; form your main-div

and center verything by adding this to your <body> styles:

min-height: 100vh;
justify-content: center;
align-items: center;

Marked as helpful

El-karece Asiedu• 20

@KareceA

Posted over 2 years ago

@darryncodes This was helpful thanks, just the 100vh that didn't work for me

Excel!• 70

@trillionclues

Posted over 2 years ago

Hi El-karece,

Great design you've got here. Everything perfectly looks amazing just the shadow on the "Proceed to payment" button, asides that everything seems perfect :-)

Patrick• 14,325

@palgramming

Posted over 2 years ago

You should add

background-repeat: no-repeat;
background-size: 100vw 40vh;

to the background image on your body tag

El-karece Asiedu• 20

@KareceA

Posted over 2 years ago

@palgramming thanks for your suggestion this was helpful, the background size conflicted a bit

Please log in to post a comment

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