Profile card component using HTML and CSS

Hey Dean,

My suggestions:

• To center the component on the page, Set the height of the container min-height: 100vh; :
• 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 {
  /* margin: 8rem auto; ;  <---Remove */
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  /* background-image: url(images/bg-pattern-top.svg);  <---Remove */
  margin: 0;   /* <---- Add */
  min-height: 100vh;    /* <---- Add */

  background: url("./images/bg-pattern-top.svg") right 50vw bottom 40vh no-repeat, 
    url("./images/bg-pattern-top.svg") 50vw 50vh no-repeat #19a2ae;   /* <---- Add */
}

main::before {   /* <---- Remove all */
  /* content: ""; */
  /* position: fixed; */
  /* top: 0; */
  /* left: 0; */
  /* width: 100%; */
  /* height: 100%; */
  /* z-index: -1; */
  /* background-color: rgb(86 122 124);*/
  /* background-image: linear-gradient(115deg, rgb(16 79 92 / 80%), rgb(177 219 251 / 70%)),
   url(images/bg-pattern-top.svg);*/
  /* background-size: contain; ;*/
  /* background-position: center; */
  /* background-repeat: no-repeat; */
}

• I suggest you put the status of the profile card into the list item to add more semantics to your project.

<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 is helpful to you... Keep coding👍

Thank you very much Ahmed!!! I appreciate it :D