Profile Card Component Built with CSS Flexbox, Grid & Css Positioning.

👾Hello Johny, congratulations for your solution!

You've done a really good work here, you've also used a shorthand for the background and this is amazing!

I don't recommend you do it in this case, because the background will be a huge line of code to manage, try to use instead the properties separately.

I've positioned the circles and you see the code below (note that you've to give some fine adjustments, but is working now)

body {
    font-family: var(--ff-primary);
    background-color: var(--clr-primary-100);
    background-image: url(bg-pattern-top.svg) , url(bg-pattern-bottom.svg);
    background-size: cover;
    background-position: top -1086px left -618px, bottom -1146px right -370px;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

Hope it helps and happy coding bro!

Hey Johnny , Nice Work

Your code is really readable and that's nice and you could have used flexbox instead of position don't get me wrong both of them works but when you are coding a larger project using flexbox is more recommended because when you center items using position you could end up covering items that you don't want to cover up and it really pain in the ass to make it responsive after using position .

Nice Work Keep It Up!