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

Profile-Card solution using css

Sebastian 100

@MecosLB

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


My first try, of course i'll need feedback and help, ty all guys :)

Community feedback

Tereza 605

@sirriah

Posted

Hello, welcome to the Frontend Mentor. First, I recommend you to use rem/em instead of % article about rem/em. Look at the design - which images are part of the content and which are only decoration? The part of the content is profile picture - so this image should be in html, the circles behind the profile picture are only decoration - this can be placed in css as background image. Have a nice day and happy coding!

0

Ola 160

@olamide203

Posted

Hello Sebastian, nice try, I would suggest giving the card a width of 350px to reduce the size

.card {
max-width: 350px;
width: 100%
}

you could also try centering the card by giving the div with class container the following:

.container {
  height: 100vh
  display: grid;
  place-items: center;
}

Happy coding :)

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