Skip to content
Submitted almost 4 years ago

Order summary card using HTML&CSS

Ghadeer Alnujaidi•10
@GhadeerN
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello everyone👋🏽

This was my first challenge, and it was an incredible learning experience! I had to think about the annual plan card and how to make it. I decided to use three div tags displayed in an inline-block and play around with the width and the margins. Is there anything simpler and more organized than this?

Any comment you have are welcome and appreciated 👍 Thank you 🌸

Code

Please log in to post a comment

Log in

Community feedback

  • dewslyse•3,005
    @dewslyse

    Hello @GhadeerN 👋! Awesome job on your first challenge 🔥🔥. In my case, I used flex properties for that section. It seemed simpler that way.

    Your document is missing an <h1>. You could just change <h2>Order Summary</h2> to <h1>Order Summary</h1>

    You have a stylesheet linked to your document. Why not move the inline style on line 41 (<p style="color: hsl(224, 23%, 55%)">$59.99/year</p>) there ?

    You can include a landmark in your document by wrapping everything within the <body> in a main tag.

    Background-size should be set to contain.

    Happy coding.

    Marked as helpful
  • walmanjm•425
    @walmanjm

    Hi Gadheer, it's seem you got it all,

    but if you have some time, please check my solution for this challenge, hope you can find some good comparison in it,

    Order summary component

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