Skip to content
Submitted over 3 years ago

Profile Card Component Solution

Ritam Mishra•30
@ritam-mishra
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

This was a tough challenge and I tried to do it as simple as possible.

Can suggest whether it is a good practice to use <span></span> tags inside <p></p> tags and then changing the style of the spans separately? (you can see I used span for 26, London, followers, likes and photos and then changed its color separately) Can it be done or is there's an alternating way, please suggest.

I would request everybody to go through my simple code and please correct any error if you find. And you are free to give any feedbacks, which I will accept wholeheartedly.

Code

Please log in to post a comment

Log in

Community feedback

  • Azan•140
    @Azi-01

    Hi, Good job on the solution! It looks nice and pretty close to the design. I checked out the site and your code, and noticed some things, so I would like to give a few suggestions. First, I noticed that the profile image and the white border around it has a gap and the background is leaking through it. Try replacing border: 5px solid white; with outline: 5px solid white; in .profile-pic img rule set. Second, try wrapping all the content in <main> </main> tags and use <div> to group different things together.

    I hope this helps! and again well done on the solution :)

    Marked as helpful
  • Ritam Mishra•30
    @ritam-mishra

    Haha, I knew I had this bug. The background was leaking a bit. Thanks for the solution. I'll change it. Very much thanks.

  • Naveen Gumaste•10,420
    @NaveenGumaste

    Hello Ritam Mishra ! Congo 👏 on completing this challenge

    Let's look at some of your issues, shall we:

    • Always use h1 first and then h2, h3 and so on

    • Wrong font-weight for the number in bottom

    happy Coding😀

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