css, bootsrap, html, js

👾Hello Edwin, congratulations for your new solution!

Here's some tips you can consider to improve your solution:

Add this to fix the card alignment:

body {
    display: flex;
    min-height: 100vh;
  }

I fixed your code to import the circles because you didnt indicate correctly the image folder location:

body {
    display: flex;
    background-color: hsl(185deg, 75%, 39%);
    background-image: url(./bg-pattern-top.svg), url(./bg-pattern-bottom.svg);
    background-repeat: no-repeat, no-repeat;
    background-position: top -375px left -235px, bottom -577px right -250px;
    min-height: 100vh;
    /* background-image: url(C:/Users/bobo1/Desktop/WEBDEVELOPMENT/GITHUB/front end dev challenges/profile-card-component-main/profile-card-component-main/images/bg-pattern-top.svg); */
    /* background-repeat: no-repeat; */
    /* background-color: hsl(185, 75%, 39%); */
    /* background-image: url(C:/Users/bobo1/Desktop/WEBDEVELOPMENT/GITHUB/front end dev challenges/profile-card-component-main/profile-card-component-main/images/bg-pattern-bottom.svg); */
    align-items: center;
    justify-content: center;
}

Note that if you're using the folder locally the live server recognizes the image location, but with a live solution you need to indicate where the image is. Remember, when the image is inside the repository folder use dot slash ./ and if is inside a subfolder use dot dot slash ../ If the image is the same folder of the html without folder just add normal path.

👋 I hope this helps you and happy coding!

Congrats on completing this challenge!

To center your card to your page, add the following to your Body Element and delete margin form your Card Class:

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}