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

Profile Card Component Challenge FEM-Updated

@nikharg

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Updated with the given suggestions. Any more suggestions or feedbacks?

Community feedback

P
Fluffy Kas 7,735

@FluffyKas

Posted

Hey, your solution looks nice, well done! Your font family doesn't work though. It seems only a small typo. I'd suggest to always use the piece of code google fonts gives you. In this case it would be font-family: 'Kumbh Sans', sans-serif;. You could also include your images in the main tag, that would get rid of some accessibility issues and to use an h1 instead of h3 for the name!

Marked as helpful

1

@nikharg

Posted

@FluffyKas Thank you so much for the suggestion sir. I'll surely implement it.

0
P
Ken 4,915

@kens-visuals

Posted

Hey @nikharg 👋🏻

I've got some quick tips to help you fix the accessibility issues and some other minor things.

  • In your markup, <div class="main">...</div> should be <main class="main">...</main>. This will fix the most of the accessibility issues. Don't forget to generate a new repot once you fix the issues.
  • This <img src="./images/bg-pattern-top.svg" class="top" alt=""> and <img src="./images/bg-pattern-bottom.svg" class="bottom" alt="">, both should have aria-hidden="true", because they are decorative images. You can read more about aria-hidden here.
  • And as already @FluffyKas mentioned, make sure to add the font-family.

I hope this was helpful 👨🏻‍💻 you did a great job for the second project, keep it up. Cheers 👾

Marked as helpful

0

@nikharg

Posted

@kens-visuals Thank you so much for the suggestions Sir!! I'll surely implement it.

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