Skip to content
Submitted about 3 years ago

Order summary card using HTML&CSS

Ghadeer Alnujaidi•10
@GhadeerN
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 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 🌸

Community feedback

  • dewslyse•3,025
    @dewslysePosted about 3 years ago

    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
    1
    Ghadeer Alnujaidi•10
    @GhadeerNPosted about 3 years ago

    @dewslyse Thank you very much 💕 This was very helpful

    0
  • walmanjm•425
    @walmanjmPosted about 3 years ago

    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

    0
    Ghadeer Alnujaidi•10
    @GhadeerNPosted about 3 years ago

    @walmanjm Thank you 🌸 You did an amazing job in your challenge 🔥 Your styling code interested me; I believe I need to learn more about CSS properties in order to create a cleaner and better design.

    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