Profile Card Component

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  Hello @Mitko90!

  Your solution looks great!

  Here's how you can get the exact position of the background pattern with the circles:

   background-color: var(--Dark-cyan);
    background-image: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg");
    background-repeat: no-repeat, no-repeat;
    background-position: right 52vw bottom 35vh, left 48vw top 52vh;
  

  I hope it helps!

  Other than that, you did an excelent job!

  Marked as helpful

  1

  ---

  

  Dimitar Radev•930

  @Mitko90Posted 11 months ago

  @danielmrz-dev Thank you.

  That was exactly what I needed.

  Will update asap.

  2
• 

  P

  Rupali•780

  @rupali317Posted 11 months ago

  Hi @Mitko, great work on the challenge. You are using semantic HTML and using custom CSS properties. Good practice!

  As for the background issue, are you referring to the positioning issue? Or something else? Can you elaborate on the issue?

  0

  ---

  

  Dimitar Radev•930

  @Mitko90Posted 11 months ago

  @rupali317 Thanks

  Yes, the positioning. I have always had problems with positioning background images to where I want them to be. I've copied the positioning I used from another user's code.

  0

  

  P

  Rupali•780

  @rupali317Posted 11 months ago

  Hi, @Mitko90 what do you think of the following suggestions?

  • I would first add the width and height attributes to the image tag like this:

  It will be handy in reducing CLS. I noticed that the width and height of the profile image was 102px*102px while debugging and hence proposed the following numbers

  <img src="images/image-victor.jpg" alt="profile image of victor" width="102" height="102">
  

  • I propose The CSS stylings for the header:

  It is better to convert from height: 140px to min-height:8.75rem (8.75rem * 16px = 140px) as the height: 140px is fixed and the min-height is more flexible. Please change to rem units as when you alter the font size settings on your browser, you will notice that with a fixed 140px, it may not look ideal compared to using rem. Do use flex as the centering of the profile image becomes easy. You can eliminate the use of margin: 0 auto in header img.

  header {
    background-image: url(images/bg-pattern-card.svg);
    padding-inline: 3rem;
    min-height:8.75rem; 
    display:flex;
    justify-content:center;
  }
  

  • I propose The CSS stylings for header img:

  I would do a position relative which indicates relative to its original position in the document flow. But of course you need to add a top, because you want to align it vertically such that 50% of the image appears outside the header. So the top calculation is like the height of the header = 8.75rem minus half of the height of the profile image (102px/2=51px)

  header img {
    border: 3px solid white;
    border-radius: 50%;
    position:relative;
    top: calc(8.75rem - 51px);
  }
  

  Do test the above by changing your browser's font setting. You will see the advantages of using rem for header height

  Please let me know if this suggestion works and meets your expectations. Feel free to ask your questions!

  Marked as helpful

  0

  

  Dimitar Radev•930

  @Mitko90Posted 11 months ago

  @rupali317 Wow, that was a lot to comprehend.

  I will post another submission with the style you provided, so thanks.

  My question tho was about the background image of the body. How to calculate properly so it looks like the design?

  Thanks again

  0

  

  P

  Rupali•780

  @rupali317Posted 11 months ago

  Hi @Mitko90 I just saw your message. The solution provided by Daniel is good. Apologies for misunderstanding your previous question

  1