All solutions

I used Flexbox to arrange the items. I used the Position property to make the avatar image look as the frontend mentor required. I would appreciate it if you could share how YOU positioned it and approached this challenge.

I won't lie, it took a lot of time to make it responsive.

I would highly appreciate your comments on how I would have improved it further. Thanks!

I made sure to make exact replica of the design provided by the frontend mentor. If you find any inconsistency do tell me about it.

If you have any suggestions for me, please let me know. Happy Coding!

Tried my best to make it exactly as it was.

A little challenge I faced was when I was positioning the prices.

I tried my best to design it as it was provided by frontendmentor.io

Please give me any tips on mobile-friendly design for this challenge.

Thank you very much for taking your time and looking at my solution.

I wanted to make the text on the button transparent so that it would show the card's background color. but I could not do that. Instead, I had to give color to each button manually. If you have a solution to this problem please let me know. Thank you very much!

I used Flexbox to align the items. But I faced issues with margins. I would really appreciate it if you could look at my code and tell me how it would have been improved.

Thank you very much.

I used Flexbox for layouts. I tried my best to come up with good solutions. however, I faced difficulty while giving styles to h4 elements ( the 4 subjects).

I would really appreciate it if you could tell me how you would have solved this problem. Thank you very much.

I used flex-box to center the component.