Profile Card Component

Thanks for the feedback @vanzasetia. Where would you suggest I use headings, ul, and li in this case. I get confused about this sometimes except for situations where it's quite obvious like an actual list or page heading.

Edit: Never mind, I took a look at your solution and now have a clue. Thanks

👋Hi Akerele Tunde! My name is Vanza!

I have some feedback that may improve this solution:

• For the bg-pattern-top.svg and bg-pattern-bottom.svg, I recommend to set them as a background-image like this, since it is a bg:

background-image:
  "./images/bg-pattern-top.svg",
  "./images/bg-pattern-bottom.svg";
background-repeat: no-repeat;

• Then you can try position them using background-position.
• Also when the user phone is landscape (640 * 360), the card will be touching the top and the bottom screen. Try to add padding to prevent it.
• Try to use headings tag, ul, li, instead of just div and span.

That's it! Hopefully this is helpful!