Skip to content
Submitted over 3 years ago

Order Summary page with html and css

El-karece Asiedu•20
@KareceA
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

how can I make this more interactive with javascript

Community feedback

  • darryncodes•6,370
    @darryncodesPosted over 3 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
    0
    El-karece Asiedu•20
    @KareceAPosted over 3 years ago

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

    0
  • Excel!•70
    @trillioncluesPosted about 3 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 :-)

    0
  • Patrick•14,265
    @palgrammingPosted over 3 years ago

    You should add

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

    to the background image on your body tag

    0
    El-karece Asiedu•20
    @KareceAPosted over 3 years ago

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

    0

Please log in to post a comment

Log in with GitHub

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