Frontend Mentor | Profile Card component using HTML and SASS/SCSS coding challenge solution

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

@RenszCamacho

Posted over 3 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🧑‍💻

Nicolas Ramos• 10

@RamosNico

Posted over 3 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!

Profile Card component using HTML and SASS/SCSS

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community