Submitted over 3 years ago

Profile card component using Flexbox and position

Said Alejandro Rosas Vera• 145

@said-alrove

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Profile card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi! what's up? I have to mention that this is my first challenge :D.

First of all, I'd like to comment that I had a few issues trying to position the background images but I found a weird way to solve it thanks to another guy who made this challenge before, if you want to see what I'm talking about you can check the background position property in both repositories mine and the one from him ... Anyways I still don't understand at all why percentages didn't work as usual with the positioning of the images, therefore I'll continue looking for more information about it.

Feedback is always appreciated :D!.

Community feedback

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

Greetings, Said Alejandro Rosas Vera! 👋

Congratulations on completing your first Frontend Mentor challenge! 🎉 Well done on this one! 👍 The profile card component looks good and you've done a nice job of positioning the background images for this challenge (something that can be slightly tricky). 😀

I only suggest allowing the width of the profile card component to decrease with the width of the screen so that it doesn't create a horizontal scroll bar when the width of the page becomes quite small (less than 400px or so). 😉

Keep coding (and happy coding, too)! 😁

Please log in to post a comment

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