Profile card component using CSS Flexbox & Grid

In your CSS I would add at every start of a project. :

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

The border-box tells tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. It helps since you don't have to put a specific width on everything. I usually use one certain width on the outside container, and then use like width: 100% if needed. However, by the avatar, I would suggest to keep it the way you use it, maybe play with it to get it closer to the design.

Some people add margin: 0 and padding:0 in there too, but it up to you.

Here is some things I find rather helpful:

• Reset the default styling by using one of the css reset out there e.g. Modern css reset by Andy Bell
• Little help from one of the user here fedmentor

If you have more question let me know.

background-image: url(bg-pattern-top.svg), 
url(bg-pattern-bottom.svg);

background-repeat: no-repeat;

background-position: right 52vw bottom 35vh, 
left 48vw top 52vh;```

This is for the back ground positioning in the body
Hope this helps 😁