Profile Card using Flex box

Hello @LucasHMelo 👋

• For background image, you can add some value for positioning your image

Documentation 📓:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

• You can add some value to background-position

Code ⌨️:

body {
  background-image: url(../../images/bg-pattern-top.svg),
    url(../../images/bg-pattern-bottom.svg);
  background-position: top -380px left -110px, bottom -350px right -150px;
  background-repeat: no-repeat;
  background-size: contain;
}

• It's better if you use the img HTML syntax instead of using the background-image in CSS. img HTML is also easier to customize.

Feel free to reach me out 🍻

HEY LUCAS!

Concerning your issue with the background, here is the code that I used for mine, hopefully, it can help you too:

background-image: url(images/bg-pattern-top.svg),
    url(images/bg-pattern-bottom.svg);
    background-position-x: -100%, 200%;
    background-position-y: 85%, -60%;
    background-repeat: no-repeat, no-repeat;

you will put this inside the body selector

To put the name near the image, for your .row, a possible solution for this would be to use a negative margin e.g margin-top: -1rem, this will move it up instead of down.

I see that you also have some accessibility issues, I can help you with that::

Instead of using a div1 for the .attribution, you should instead use a semantic element like footer`.

HOPE I COULD BE OF HELP :)

HAPPY CODING!