Profile Card Component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Nikul, congratulations for your new solution!

  Your solution is really good done, I can see that you've paid attention to the details and have done the hardest part (the background). Thats amazing. Here's my tips for you:

  You can add these two circles as a background, adding it to the body with two keys properties, background-image and background-position, note that the comma inside each properties declare the single modification for each circle separated.

  REMOVE THE SPANS WITH DISPLAY: NONE AND THE BACKGROUND FRON THE CONTAINER

  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 -332px left -56px, bottom -568px right 137px;
  }
  
  .bg-pattern-top {
      position: absolute;
      top: -45%;
      display: none;
      left: -15%;
  }
  
  .bg-pattern-bottom {
      position: absolute;
      bottom: -55%;
      right: -10%;
      display: none;
  }
  
  .container {
      /* background: var(--Dark-cyan); */
      width: 100vw;
      height: 61rem;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      position: relative;
  }
  

  👾My rating for this solution: ⭐⭐⭐⭐⭐

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Nikul Sagadhara•190

  @nikul-sagadharaPosted over 2 years ago

  @correlucas Thank you Sir for suggest better code, its helps me a lot.

  0
• 

  Nikul Sagadhara•190

  @nikul-sagadharaPosted over 2 years ago

  Hy.. guys i just created this awesome profile card, please do checkout and give feedback !.

  Thank You :)

  0