First attempt at a design (need a little help)

Need a little help with this project. My first time trying to recreate anything, and it shows that I need to get better. I was trying to re create https://www.frontendmentor.io/challenges/profile-card-component-cfArpWshJ

This is my attempt, spent around three hours just for this and still could not get it. Still, it got me excited to learn this stuff. Here is my code pen

I couldnt figure out how to get the top pattern and white dive to meet in the middle, also could not get the top left pattern to move up anymore. I gave up on trying the bottom left circle, as I could not do anything with it. Then that first little bit of text did not want to work with me. If anyone could help me out, and give some advice on what I need to pay attention to more/work on. Like I said, its my first time trying to create it but I had fun with it

I used margin-top: -20px; on .profile-container to get the top pattern and white to line up together. Then I nested the name and country <p> tags inside a <div> and gave that div text-align: center and padding-top: 55px.

Thanks! Now, I just need to figure out how I can push that top left circle up a bit more. As of right now it wont move.

By the way? is setting elements to position: absolute the only or best way to get elements to overlap? From what I understand the position is to give an element absolute positioning, so it will overlap elements if it needs to in order to get to a position

The screenshot of the original page may have gotten that overlap with the background circle due to a more narrow viewport. When I resize my browser window the profile card moves over toward the circle.

Another way to achieve overlap is by using a grid.

Here is more info on absolute/relative positioning: position | CSS-Tricks