Profile Card Component using HTML and CSS

Community feedback

• 

  yishak abrham•2,150

  @yishak621Posted about 2 years ago

  hyeon 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*/ 
  ```css
  .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*/ 
  ```css
  .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% 
  ```css 
  /*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
  

  1

  ---

  

  Hyeon Park•350

  @hkparkjsPosted almost 2 years ago

  @yishak621

  I used background-position property to configure background image. but your solution also looks good, so I will consider your solution. Your comment helped me a lot. Thank you!

  0