Profile card component

Community feedback

• 

  Shard Codes•430

  @Shard-CodesPosted over 2 years ago

  Hello there EHO, You did an amazing job on the challenge!

  Though I have some suggestions for you.

  1. on your card element switch the width property to max-width like this.

  .card {
     background-color: white;
     height: 374px;
     max-width: 350px;  /* Like this */
     box-shadow: 0px 50px 100px -20px rgba(8, 70, 94, 0.504835);
     border-radius: 15px;
     overflow: hidden;
  }
  

  2. on your main element remove the flex-direction property because you don't need it.

  .main {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;  /* Remove this */
     min-height: 100vh;
     background-color: $dark-cyan;
     background-image: url("../../public/images/bg-pattern-top.svg"), url("../../public/images/bg- 
     pattern-bottom.svg");
     background-repeat: no-repeat, no-repeat;
  
     background-position: top -150px left -200px, bottom -150px right -200px;
     background-size: 80%, 80%;
     @media (min-width: 992px) {
      background-position: top -400px left -400px, bottom -400px right -400px;
      background-size: 65%, 65%;
    }
  }
  

  3. On your banner image set the width property to 100% instead of 350px.

    &__banner {
      height: 140px;
      width: 100%; /* Like this */
      background-image: url("../../public/images/bg-pattern-card.svg");
    }
  

  Ok, that's all I have to say, I hope this helps and Happy coding.

  0