#06 Credit Card Gradient

Preview

Bank Name

$ 285,99
3462 7351 4865 1786
10/20

HTML

SCSS


*, ::after, ::before {
  box-sizing: border-box;
}

/* css element */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

.credit-card {
  width: 380px;
  height: 255px;
  border-radius: 10px;
  background: rgba(228,79,203,1);
  background: -moz-linear-gradient(-45deg, rgba(228,79,203,1) 0%, rgba(79,161,209,1) 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(228,79,203,1)), color-stop(100%, rgba(79,161,209,1)));
  background: -webkit-linear-gradient(-45deg, rgba(228,79,203,1) 0%, rgba(79,161,209,1) 100%);
  background: -o-linear-gradient(-45deg, rgba(228,79,203,1) 0%, rgba(79,161,209,1) 100%);
  background: -ms-linear-gradient(-45deg, rgba(228,79,203,1) 0%, rgba(79,161,209,1) 100%);
  background: linear-gradient(135deg, rgba(228,79,203,1) 0%, rgba(79,161,209,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e44fcb', endColorstr='#4fa1d1', GradientType=1 );
  box-shadow: 0px 0px 20px 0px rgba(135,151,171,0.8);
  padding: 25px;
  font-family: 'Montserrat', sans-serif;
  
  .card-top {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
    
    h3 {
      color: #ffffff;
      margin: 0;
      font-size: 16px;
      font-weight: 600;
    }
    
    svg {
      fill: #ffffff;
      width: 45px;
    }
  }
  
  .card-value {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 35px;
    
    svg {
      fill: #ffffff;
      width: 50px;
      opacity: 0.6;
    }
    
    .value {
      font-size: 32px;
      font-weight: 700;
      color: #ffffff;
    }
  }
  
  .card-number {
      
    .number {
      margin-bottom: 15px;
      
      span {
        font-size: 20px;
        margin-right: 15px;
        color: #ffffff;
        
        &:last-child {
          margin-right: 0;
        }
      }
    }
    
    span.date {
      color: #ffffff;
      font-size: 16px;
      font-weight: 400;
    }
  }
}

@media (max-width: 578px) {
  .credit-card {
    max-width: 260px;
    height: auto;
    
    .card-top {
      margin-bottom: 17px;
      
      svg {
        width: 30px;
      }
    }
    
    .card-value {
      margin-bottom: 17px;
      
      svg {
        width: 35px;
      }
      
      .value {
        font-size: 25px;
      }
    }
    
    .card-number {
        
      .number {
        margin-bottom: 5px;
        
        span {
          font-size: 16px;
          margin-right: 4px;
        }
      }
      
      span.date {
        font-size: 14px;
      }
    }
  }
}


Notes

In the code you can replace the images, icons and font. For icons and font you may have to change the size in the css.

Help the Project

Your help is important for the success of this project. We will make this project grow for everyone.