Skip to content
Submitted almost 4 years ago

Profile Card component using HTML and SASS/SCSS

Nicolas Ramos•10
@RamosNico
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

This is the first challenge I've ever done, felt pretty good.

Both Background's .svg are placed in order to look good at widths: 1440px and 375px through media queries, but as soon as the screen gets bigger they will move all over the place, not sure how to fix it.

Also, I can't manage to truly align the card's footer with the main body, the statistics are a bit more to the right compared with the name, although I centered all of them. I could center them manually with some right-padding, but does anyone know how to fix it without going that way?

Community feedback

  • Renszo Camacho•1,615
    @RenszCamachoPosted almost 4 years ago

    Hello, 👋🏻 RamosNico.

    Well done my man, in your first challenge 👏👏👏. Lovely job on this challenge, place properly the background image is quite tricky or at least it was for me.

    I've been digging into your code. And this is how I would do it.

    • I would delete the images from the Html. and places it in the Css.

    body { background-color: #19a2ae; background-repeat: no-repeat; font-family: "Kumbh Sans", sans-serif; background-image: url(../images/bg-pattern-top.svg), url(../images/bg-pattern-bottom.svg); background-repeat: no-repeat, no-repeat; background-position: right 50vw bottom 50vh, left 50vw top 50vh; }

    Regarding the alignment of the card's footer with the main body, I see it well. They have a display: flex. justify-content: space-evenly.

    I hope, it helps. Happy coding🧑‍💻

    2
    Nicolas Ramos•10
    @RamosNicoPosted almost 4 years ago

    Hello @RenszCamacho !

    Thank you so much for your feedback. I really like the solution you came up with the images as background, for sure they'll be more responsive and way cleaner code-wise.

    I'll be trying it soon.

    Happy coding!

    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