just flexbox solution

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  👋Hi Alejandro Villaescusa! My name is Vanza!

  I have some feedbacks to improve this solution:

  • Instead of writing something like this:

  .container{
      display: flex;
      flex-direction: column;
      text-align: center;
      background: var(--dark-desaturated-blue);
      width: 90%;
      margin:3em auto;
      padding-bottom: 1em;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
  }
  
  img{
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      filter: sepia(100%) hue-rotate(240deg) saturate(180%) brightness(80%);
  }
  

  You can try this:

  .container{
      display: flex;
      flex-direction: column;
      text-align: center;
      background: var(--dark-desaturated-blue);
      width: 90%;
      margin:3em auto;
      padding-bottom: 1em;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      overflow: hidden;
  }
  
  img{
      filter: sepia(100%) hue-rotate(240deg) saturate(180%) brightness(80%);
  }
  

  By adding overflow: hidden, you don't have to repeat the border-radius.

  • Try to make the position of the card on the center of the page to match the design, by add this to your CSS:

  body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }
  

  That's it! Hopefully this is helpful!👍

  Marked as helpful

  1

  ---

  

  Alejandro Villaescusa•190

  @alexvillhenPosted over 3 years ago

  @vanzasetia omggg thank u so muuuch, i'll keep your tips in mind for the next challenges😁😁😁

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  @alexvillhen You're welcome!😉

  0
• 

  Milind•20

  @Milindk1Posted over 3 years ago

  You did well.

  0