Profile-Card-Component Grid and Flex-box

Community feedback

• 

  Renan Tiscoski•1,240

  @DonUggioniPosted almost 2 years ago

  Hey there,

  To be honest, I think, your solution looks really good! You did a good job there, don't worry too much about it. Every project is a learning process and I'm sure that on your next project, some things will become easier and others will just be a new challenge and learning opportunity. Also, this is an incredibly simple project so, really don't worry about it too much =)

  Keep it up and happy coding 🤓

  Marked as helpful

  1
• 

  Brilliant Smart•50

  @brilliant-smartPosted almost 2 years ago

  I use background-image: url(); for both the background images and the area above the profile image. I use values to position the background image. Look at my css below, I use grid too, you can change the values or use %tage to position them well. Hope it will be helpful, regards!

  body { display: grid; grid-auto-flow: row; align-content: center; justify-content: center; height: 100vh; width: 100vw; background-image: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg"); background-color: var(--Dark-cyan); background-position: -17.5rem -31.25rem, 50rem 23.75rem; background-repeat: no-repeat; font-size: 18px; font-family: 'Kumbh Sans', sans-serif; padding: 0.8rem; }

  0