Skip to content
Submitted almost 3 years ago

Profile Card

Parves Hossain Rabby•560
@Iamparves
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 took way too long than it should have. I was struggling with the background. I managed to do it for desktop easily using background image. But it wasn't fitting for tablet or mobile device. Then I tried using pseudo element. But even that was't satisfactory. I ended up with the background solution. And used media query for tablet and mobile device. I feel like it's still a little bit messy.

Anyone tried using transform-translate? Maybe I should try using the combination of pseduo element and transform property.

I would greatly appreciate any tips regarding this issue.

Community feedback

  • Doc•100
    @GodILoveTequilaPosted almost 3 years ago

    Hello, good job. Today i also had some troble making this one. You can make the circles responsive by adding a html img with an empty alt attribute instead of using css background property. And to make that have a look at css relative and absolut position. Keep it going. Cheers!

    0
    Parves Hossain Rabby•560
    @IamparvesPosted almost 3 years ago

    @GodILoveTequila Thanks for your feedback.

    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