Skip to content
Submitted over 3 years ago

Profile Card Component with Html/CSS

Ildrim•50
@Ildrim
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello, this is the 4th project i'm finishing, and all in all i think it went well.

But... as always i have a couple of questions as to how it could have been done better....

1st I'm not sure if my approach on the positioning of the background images was the most conventional one... i finished the project using the snippet below

body {
  background-color: hsl(185, 75%, 39%);
  background-image: url("images/bg-pattern-top.svg"), url("images/bg-pattern-bottom.svg");
  background-position: right 50vw bottom 50vh, left 50vw top 50vh;
  background-repeat: no-repeat, no-repeat;
}

but how do you think could have been done better?

and 2nd,

why is it that whenever i tried to center my card using flexbox, the card would collapse when it had a max-width in it? it would only work if it had a specific width like e.g width:375px

Once again ty very much in advance for any help you'll be able to provide me with!

cheers!

Code

Please log in to post a comment

Log in

Community feedback

  • Ben•770
    @BenConfig

    Hi Ildrim, well done, your page looks good!

    I believe you can remove the second no-repeat on your background-repeat property. It only needs to be declared once as it will apply to both background images.

    If you wanted, there is a background shorthand property that combines all of the individual background properties you have used. Although the way you have done it might actually be more readable.

    Regarding your second problem, I think that is just the default behaviour of flex (and grid), when applying justify-content: center, i.e. the element will be compressed as much as possible even if it is a block level element. I think width: 100%; would fix it?

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