Skip to content
Submitted over 3 years ago

Profile Card using Flex

Paul James Azanes•75
@pjazanes
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I struggled making those two svgs stick to the background and overflow outside the viewport. But I think I did it well.

I wonder why the font on my solution looked different to the sample design? Even though I followed the font family and weight stated in the style guide.

I would greatly appreciate it if you kindly give me some feedback. Happy coding!

Community feedback

  • tediko•6,680
    @tedikoPosted over 3 years ago

    Hello, Paul James Azanes! 👋

    Well done on this challenge! Your solution is on point. Here's my suggestion:

    • Use either heading element <h1-h6> paragraph <p> or <span> to describe .name, .age and .location. Don't use divs for that.
    • Read about semantic. Semantic elements lead to more consistent code, they are easier to read and improve accessibility.

    Good luck with that, have fun coding! 💪

    1
    Paul James Azanes•75
    @pjazanesPosted over 3 years ago

    @tediko Thank you for the feedback and suggestions! The link you provided is very helpful 🙂

    0
  • coderkc•0
    @coderkcPosted over 3 years ago

    @import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap');

    You need to specify font weight at importing url like above. Good job btw 👍

    1
    Paul James Azanes•75
    @pjazanesPosted over 3 years ago

    @coderkc It worked! Thank you 🙂

    0

Please log in to post a comment

Log in with GitHub

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