profile card component

Hi Nwobodo,

I love seeing this kind of thread where someone's suggested stuff and you've taken it on board and made changes. Well done thats great to see!

Looking at your html, it's invalid at the moment because you have <p> tags directly inside a <ul>. That's dead easy to fix though, just swap the paragraphs for <li>s instead (no paragraphs needed)

Only other thing I spot from. Glancing at the result is you need a little more padding / whitespace at the bottom of the card so it looks more like the design.

Well done on this

Hey, I just finished the exact same exercise so was checking yours to see how you handled it. Can I ask you why you put everything in media-queries? Your page jumps when I resize the page-size. The font strangely didn't load. And there is a lot of repeated code and a lot of unnecessary media-queries. Could you clean up your code? Start writing thinking mobile-first but without adding the media-query. Because this <meta name="viewport" content="width=device-width, initial-scale=1.0" /> is in your html, your webpage is already responsive. This exercise can be solved without any media-query. Best practice here is put everything in a div class="container"give the container in your css a max-width (350px) and a width='85%' and the component will be ok when resizing the page. In css it's very easy to write tons of code. The key is to reach the same effect, with as little as code as possible. Reach out if you have any questions. Happy coding!