profile-card-component-main

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @Luis-Olivero, congratulations for your new solution!

  Answering your question: To MANAGE and add these two circles as a background, adding it to the body with two main properties, background-image and background-position, note that the comma inside each properties declare the single modification for each circle!

  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;
      /* background-image: url(images/bg-pattern-top.svg); */
      /* background-image: url(images/bg-pattern-bottom.svg); */
      background-color: var(--Dark-cyan);
      font-family: var(--Kumbh);
      font-size: 1rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100vh;
      padding: 6em 1em;
  }
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  Md5 dalton•1,430

  @md5daltonPosted over 2 years ago

  Hi Luis... Congrats on finishing the challenge.

  For your first question, you can add this to your styles:

  .card__img--picture img {
       position: relative;
       top: -48px;  /* 50% of element height */
  }
  

  Marked as helpful

  0
• 

  Chyunjet•620

  @JetyunPosted over 2 years ago

  you can put the bubble image in the card as background image, then you can use margin to arrange the position of your image.

  0