Profile card component built using HTML and CSS

Hello Lucy and well done on the challenge, Here are my suggestions :

• Use Prettier extension on your IDE to format your code.

• use code below instead of specifying default value for html element separately

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

• Html elements are block level by default ( thats one of the reason for approaching mobile first ), so you don't need 👇

display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

on your main tag, you get the column by default

• give min-height:100vh instead of height:100% to your body.

• right now, background circles are not responsive and layout breaks quite easily on smaller screens, so here is what I did on this challenge for background circle to make sure of their responsiveness. firstly add 👇

.c1 {
  right: 50%;
  bottom: 43%;
}

.c2 {
  top: 50%;
  left: 50%;
}

.c1,
.c2 {
  position: fixed;
  transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 0.6);
  z-index: -1;
}

to your css and then add images to the markup 👇

  <img
        src="./assets/images/bg-pattern-top.svg"
        alt=""
        role="presentation"
        class="c1"
      />
      <img
        src="./assets/images/bg-pattern-bottom.svg"
        role="presentation"
        alt=""
        class="c2"
      />

and then remove background properties from body. this way, background circles won't go bananas on smaller screens. keep in mind that's my approach and there are definitely better approaches you may come up with.

• use width:100% and then max-width: ... px instead of giving a static width to your card, so card's layout won't break on small devices, right now your card leaves side scroll on small screens.

• I don't recommend using static heights for elements unless it's really crucial.

• for stats, I think you'll be better off with something like

 <ul class="card-stats">
        <li><span>80k</span> <span>Followers</span></li>
        <li><span>803k</span> <span>Likes</span></li>
        <li><span>1.4k</span> <span>Photos</span></li>
 </ul>

instead of using so many divs.

• give some paddings to body so content won't occupy whole screen on mobile devices.

✅ Also I opened a pull request to your repository which will fix these issues

I hope this was helpful

Looks really solid!

HTML

Everything looks pretty good here, have two suggestions:

1. Make the person's name an <h1>. It's the most important element on the page
2. Rarely used but the labels/stats could be dl/dt/dd – would be <dl> for the enclosing element, <dt> for the label (followers, likes photos), <dd> for the numbers

CSS

Well organized overall!

One improvement I'd recommend: there are a few magic numbers in here. Namely, the 87px for .card-stats and the 53px in .card-header img. The latter one is easier to address.

Basically the 53px only works because the image is a certain size (106px). If we were ever to swap out a different sized image here, the CSS would break.

If you replace the left and bottom properties with:

bottom: 0;
left: 50%;
transform: translate(-50%, 50%);

You'll get the same centered effect with no magic numbers. I realize you might not have gotten to practice much with translate but this is a really powerful technique for centering.

The other issue is harder to solve: it's because .card-content doesn't stretch to fill the whole length of the card, and it probably should. The best way to solve this is with a flexbox column approach on the parent element. Happy to go into this more if you're interested!

Background position

Hard to imagine a better solution than the one you came up with! Glad you learned about multiple bg images