All comments

• 

  Satyam Jha•400

  @satyammjhaSubmitted over 2 years ago

  Feedback and suggestions are welcomed.

  

  Profile card component using HTML, CSS and Javascript.

  1

  10
  

  Hammad Ahmed•180

  @HammadEngrPosted over 2 years ago

  Good Solution Overall, but you can try using Display = Grid; , it will make it more simple and easy to align and justify the content.

  0
• 

  Danijel Bogovic•60

  @RedPitcherSubmitted over 2 years ago

  I change position of Bootstrap and css link, but still it doesn't accept the changes for btn. Can someone explain where is the problem? Ass well wit border-radius on btn, I inspect it and but however I wanted to fix it, it doesn't accept changes. I really appreciate your help!

  

  Still some problems....

  1

  20
  

  Hammad Ahmed•180

  @HammadEngrPosted over 2 years ago

  Couldn't find your repository, share a link so that any one can check your code. for the time being try these settings.

      margin-top: 90px;
      margin-bottom: 3%;
      border-radius: 100px;
      padding: 7px 5px;
      border-style: none;
      background-color: white;
      mix-blend-mode:lighten;
    }```
  

  0
• 

  Yoseif Alfiky•90

  @Yoseif-Alfiky-1Submitted over 2 years ago

  Hello, Could you give me more advice about " position " , Really I need help.

  

  Profile card component

  1

  30
  

  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
• 

  Glow•140

  @TheAwesomeTechGirlSubmitted over 2 years ago

  I couldn't get the styling for the active state, please can I get a correction on that? And can I please get a correction on my mobile if any?

  

  3column-preview-card

  4

  30
  

  Hammad Ahmed•180

  @HammadEngrPosted over 2 years ago

  Hi Glow ! Overall good solution. but you can also do it using css grids, do try grid technique. Create a div and set display to grid. set grid-template-colums: auto auto auto, it will make 3 columns. create 3 divs in it which will make 3 columns. and add the content in these divs.

      display: grid;
      grid-template-columns: auto auto auto;
      margin: 7% 15%;
    }```
  

  Marked as helpful

  0