Skip to content
Submitted over 2 years ago

Order Summary Component Using HTML and CSS flexbox and Grid

Paula Gayle•70
@P-Gayle
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

Hello! This is my first project on FrontEnd Mentor. I mainly used CSS Flexbox and a little Grid. couldn't get the card centre aligned correctly using Flexbox so any feedback on my alignment (or anything else that you noticed) would be very welcome. I completed the project without the Figma file so the design might not be exactly the same. Thanks for looking!

Community feedback

  • Eya Gargah•230
    @eyagargahPosted over 2 years ago

    Great work! I have some advice about the code 1 - Instead of <div class="card"> , replace that with <main> element.it will give your code more semantic meaning and Fix the issues that appear in Accessibility Report. 2- when you hover over the change button and cancel order they should change color so add a hover state

    Marked as helpful
    0
    Paula Gayle•70
    @P-GaylePosted over 2 years ago

    @eyagargah Thank you so much Eya! I will give that a try

    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