Profile Card With Simple HTML, CSS Flex And Moving Background

Learned a lot from this small project, even if it's simple. I managed to practice by heart a lot of previous concepts used in the past challenges, shaping and aligning the elements with flex while using pixel perfect extension while on device mode (firefox Ctrl+Shift+M) to achieve perfect size elements, thanks to all the people that gave me solid feedbacks so far. That keeps me motivated and better at every new project.

The hardest thing for me in this one, was making the 2 big bubbles background. They are finely positioned while on desktop resolution, but when I resize the window, they move around in the main axis and end up both outside the viewport when in mobile resolution (375px). I don't know how to make it so both bubbles will be there in the background no matter the screen size is, and in the same position as shown in the original design. How did you guys do that?