Profile card component

Community feedback

• 

  Hammad Ahmed•180

  @HammadEngrPosted over 2 years ago

  @Yoseif-Alfiky-1 Hi Yoseif! overall good solution.

  you can use display:grid; for better alignment and put gaps between grids istead of margins. like

    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 60px;
    margin: 0 0 0;
    margin-top: 30px;
  }``` 
  
  you can make main div border radius, and just set the overflow to hidden, then there is no need to modify radiuses of child items.
  
  ```.mainCard{
    width: 400px;
    height: 400px;
    background-color: white;
    border-radius: 20px;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align:center;
    overflow: hidden;
  }```
  
  instead of using z-index, just put the background images at the start of body in a separate div. z-index can be used but it becomes sometimes difficult to interpret.
  

  Marked as helpful

  0