Skip to content
Submitted almost 3 years ago

Order Summary Challenge without Flex and Grid

Francis•260
@FrancisKhaledKhodja
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

I will be delighted to receive your criticisms, advice or recommendations. My main difficulty was to manipulate the display and position properties...

Community feedback

  • PhoenixDev22•16,950
    @PhoenixDev22Posted almost 3 years ago

    Greeting Francis Khaled Khodja , Again you have done a great work .I have few suggestions:

    • No need to upload all the weights only the specified ones <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap" rel="stylesheet">.

    •It's better to wrap this <div class="plan__button--subscribe">Proceed to Payment</div> in a button tag and this <div class="plan__button--cancel--order">Cancel Order</div>` in anchor tag <a>. You can add a hover effects to them.

    To tackle the accessibility issue: • Wrap everything in your body in <main> ... OR use semantic tags ... OR give role="" to the direct children of your <body>.

    Happy and keep coding!

    Marked as helpful
    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