Profile Card Component

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  Hey, Sravan! 👋

  Congratulations on completing your first Frontend Mentor challenge! 🎉 Nice work on this one! 🙌

  I'd like to suggest using CSS background images to add and position some of the background images in this challenge. Doing so means you won’t have to add those images directly to your HTML (which will keep your markup a little cleaner) and I think it’s easier to manage background images with CSS because you won’t have to worry about things like overflow issues. If you’d like to learn more about CSS background images and how to use them, check out this tutorial from MDN.

  If you do use CSS background images, you can also try playing around with percentages and viewport units to position the background images in this challenge, since that should help to position the background shapes in such a way that they do not move around so much when the page is resized. That's what I did for my solution to this challenge, and it seemed to work out fairly well.

  And I think it would be worth using a layout tool like flexbox to center the card component in the viewport. Try adding this to your styles,

  body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  

  ...to do just that! 😉

  Hope this is helpful. 🙂

  Keep coding (and happy coding, too)! 😁

  Marked as helpful

  1

  ---

  

  Sravan•220

  @SravanSTGPosted over 3 years ago

  Hi @ApplePieGiraffe!

  Thank you for the valuable feedback. I updated my solution and it looks a lot better.

  Thanks again! Happy coding to you too! 😄

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  @SravanSTG

  Awesome! 😀 Glad to help! 👍

  0