Profile Card Component built using HTML and CSS

Hey! It looks good!...

My suggestions:

An easy way to handle the background circles, Give the body or the profile card container the following style to put these circles as a background image:

body {
   //...
   background: url("./images/bg-pattern-top.svg") right 50vw bottom 40vh no-repeat, 
                url("./images/bg-pattern-bottom.svg") 50vw 50vh no-repeat var(--dark-cyan);    /* <---- Add */
}

.main-container::before {         /* <---- Remove */
   //...
}
.main-container::after {         /* <---- Remove */
   //...
}

• I suggest you put the status of the profile card into the list item to add more semantics to your project, Div's don't do much for semantics but a list is much more meaningful..:

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

Hope this help!... Keep it up👍

Hi Promise!

Apart from the recommendations above you can try adding letter-spacing to the words below the numbers to make them separate letters.

Like this:

.stats .numbers p {
  font-size: 14px;
  font-weight: 400;
  color: var(--dark-gray);
  letter-spacing: 1px;
}

I think that's my little input I can give you, everything else seems to me to be pretty good, good luck :D!