Profile card component

Community feedback

• 

  yishak abrham•2,150

  @yishak621

  Posted over 2 years ago

  The main challenge of these project is to practice the svg background adjustment ...so to make long story simple here is how u done these project...u are given two circular shaped svg picture and background color ...so the background of the card is the mixture of three things ....but unfortunately the circles are aligned center so first u will add them and push the bottom svg picture out of the screen by psuedo elments /*adding the top svg after the container*/ .container:after {   top: 100%;   left: 100%;   background: url('./images/bg-pattern-bottom.svg') no-repeat top left; /*to expand to top and left*/ } and for the top svg pic u will first place it in the center by /*adding the top svg before the container*/ .container:before {   top: 0;   left: 0;   background: url('/images/bg-pattern-top.svg') no-repeat bottom right; /*to expand to bottom and right*/ } and then for the whole container that is the parent of all /*Containers*/ .container {   display: flex;   min-height: 100vh;   flex-direction: column;   justify-content: center;   align-items: center;   position: relative;   overflow: hidden;   background: var(--color-one);   z-index: -1; } if u notice in the above i say position relative to place its circular svgs absolute..then here comes the magic part finally u will move both svgs to the left -50% and to the top -50% /*psuedo elments*/ .container:before, .container:after {   position: absolute;   content: '';   width: 100vw;   height: 100vh;   background-size: auto;   transform: translate(-50%, -50%); /*to the left and top*/   z-index: -1; } if u don't know about psudeoelments after and before please review again thanks

  10

  Marked as helpful