Skip to content
Submitted 21 days ago

Responsive Profile Code Component using flexbox.

Zainab Aminu Mikail•70
@aminuzainab
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

What am most proud of is; My solution looks almost perfect as the challenge given to me.

What challenges did you encounter, and how did you overcome them?

The body of the page, making the two circles at the background align together was a challenge to me,atlast i watched a tutorial that also speaks about the same thing and i finally got it.

Code

Please log in to post a comment

Log in

Community feedback

  • Abdul Subhan•820
    @Esabdul

    The layout looks clean, but there are a few things that can be improved.

    First, your alt="#" in both image tags isn’t helpful for accessibility.

    Next, the font-family: 'Kumbh', sans-serif; in the body doesn’t match the Google Font you imported, your import uses Outfit, so either correct the font-family to 'Outfit', sans-serif or fix the import.

    Also, using a border-radius of 50px for a circular image is risky, instead, use border-radius: 50% to ensure a perfect circle at any size.

    Lastly, there's no hover or focus feedback for the interactive content; even if it's a static card, adding :hover effects could improve the user experience.

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