Skip to content
Submitted over 2 years ago

Frontend Mentor - Order summary card solution

Anie•100
@A-n-i-e
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

While working on this project, I learnt how to use svg images properly​🙃​ Was confusing at first but they were quite cool😋​

I had a bit of trouble with the div containing the 'Annual Plan' stuff but I think it turned out alright​😆

Comments on ways to improve are totally welcome!

Community feedback

  • Ekomobong Edeme•190
    @KingLyricsPosted over 2 years ago

    The Annual part was a pain to figure out. Trust me i feel you on that. LOL. Anyways, well done. A little bit of margin on the Annual plan and the pricing. You blended the colors well and even got the size of the entire card to almost match. Mine was slightly shorter but yours is actually perfect. Easy on the eyes and well done. Excellent work! Congratulations on finishing it. Keep it up.

    EDIT: Also challenge yourself more by using SCSS if you are familiar with it. Makes the coding in CSS alot more fun!

    What I did for the Annual Plan was put everything in a div. Then put the annual plan and price as li tags. After that it was alot of flex and align center. There might be another way but welp. lol

    0
    Anie•100
    @A-n-i-ePosted over 2 years ago

    @KingLyrics Thanks for the feedback😊​ About the annual plan stuff, I didn't even think about making the li tags....that's pretty cool, I'll try it next time🙃​

    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