Profile Card Component - HTML5 & CSS3

Community feedback

• 

  John_diddles•470

  @JohndiddlesPosted over 2 years ago

  Hi Thiago! Really nice job 👍

  To center the entire card in the middle of the page, you can add the following to the body element

  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  

  This will help you center the card both horizontally and vertically. Although, you'd have to adjust the position of your background images.

  Also to center your image. You can bring your margins into just one line like this

  .profile-picture{
       z-index: 1;
       display: block;
       border-radius: 50%;
       border: 3px solid #fff;
       margin: -50px auto 5% auto;
     }
  

  using a value of auto on the x axis helps you center your item horizontally and merging all the margins into one line helps you keep your code a bit cleaner.

  Regardless, this was a solid attempt. cheers 🍻 🥂 Keep coding...

  Marked as helpful

  1

  ---

  

  Thiago Marcelo•10

  @marcelx-silvaPosted over 2 years ago

  @Johndiddles Thanks for the feedback, I will take them with me. I am grateful for the help. I only add position: relative in .profile-picture because the border was only showing up at the bottom of the profile picture.

  0