Profile card componet made with CSS Flexbox

Hello there 👋. Good job on completing the challenge!

I have some suggestions about your code that might interest you.

HTML:

• It should be one <h1> element per page. You could use a <ul> to display the stats.

  <ul class="profile-card__stats">
    <li class="profile-card__stats-item">80K <span>Followers</span></li>
    <li class="profile-card__stats-item">803K <span>Likes</span></li>
    <li class="profile-card__stats-item">1.4K <span>Photos</span></li>
  </ul>
  

  Something like this could be.

• You could replace the <article id="article-center"> for a <div> is more semantic in this situation.

CSS:

• Try not to limit the width of the body. This could help you with the background positioning

• You could use multiples background-image for the page background, for example:

  body {
    position: relative;
    background-color: var(--clr-dark-cyan); /* use you color variable here */
    background-image: url(../images/bg-pattern-top.svg),
      url(../images/bg-pattern-bottom.svg);
    background-repeat: no-repeat;
    background-position: right 40vw top -37.5rem, left 42vw top 14.375rem;
  }
  
  @media only screen and (min-width: 90em) {
    body {
      background-position: right 52vw top -32.25rem, left 48vw top 23.125rem;
    }
  }
  

  This could help you to understand multiple patterns in the background. You also could use CSS Grid and a absolute element to make the background!

• You can use the same trick for the card top pattern.