Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Frontend Mentor - Order summary card solution

Anie 100

@A-n-i-e

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@KingLyrics

Posted

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-e

Posted

@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
Discord logo

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