Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Static page make with flexbox

@MarlonPassos-git

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


When placing the element I had to use some "magic numbers" in the margin of my elements to make those spaces in the user part. Is there a cleaner way to do this without having to put infinite DIVs in the code?

I also tried using BEM to organize my classes in CSS but I don't know if how I used it was too much

Community feedback

@ToNisamBioJa

Posted

Pretty good job!

Aside from a couple of differences(like the width of the card) its pretty close to the original design.

Keep going. Happy coding!

1

@MarlonPassos-git

Posted

@ToNisamBioJa Thanks for the feedback

0

@SandeepGumaste

Posted

You could use "justify-content: center" in the card-profile div.

1

@MarlonPassos-git

Posted

@SandeepGumaste In case the image, name, age and city are all inside a container, if I use "justify-content: center", all these elements will be centered vertically, and in this case I just wanted the image. It would be really nice if flex-box had an element property for "justify-content", just like there is "align-self"

0
hassan ABD 865

@hassanabd22

Posted

this good Practicing a lot of code will make you better

1

@MarlonPassos-git

Posted

@hassanabd22 Thanks for the feedback

0

Please log in to post a comment

Log in with GitHub
Discord logo

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