Profile-card-component with flexbox

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  Hello again Anass, here's one tip about the background image:

  The step by step to include the two circles as background positioned on top and bottom:

  Remove the background-color from the container and add it to the body to make sure this color background will display it full screen.

  .container {
      width: 1440px;
      height: 800px;
      /* background: hsl(185, 75%, 39%); */
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      box-shadow: 0px 10px 20px rgb(63 92 97 / 16%);
  }
  

  To add the circles (bottom/top) in the background, the best way is by using background-image to manage it since adding them to the body you make sure it will be under everything, see the properties below and see that the comma inside each properties declare the single modification for each circle separated.

  body {
      background-color: hsl(185deg, 75%, 39%);
      background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg);
      background-repeat: no-repeat, no-repeat;
      background-position: top -500px left -400px, bottom -700px right -250px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
  }
  

  See if works for you!

  Marked as helpful

  2
• 

  anass sanba•450

  @sanba-anassPosted about 2 years ago

  hi Lucas thank you for the useful tips i will fix every single challenge in the near future. imay add some animation too thanks again man really useful stuff as always! 😁😁

  0