<div class="container">
  <div class="row justify-content-md-center">
    <div class="col-4">
      <div class="creditcard">
        <div class="text-right">
          <img class="img-fluid w-25" src="http://www.pngall.com/wp-content/uploads/2017/05/Visa-Logo-PNG-Image.png" />
        </div>
        <div>
          <img class="img-fluid chip" src="https://png2.kisspng.com/20180330/vxe/kisspng-iphone-computer-icons-integrated-circuits-chips-sim-cards-5abe6d818d7981.3350606115224293135795.png" />
          <div>
            <div>
              <h3>1602 3323 8300 1010</h3>
            </div>
            <div class="container">
              <div class="row justify-content-md-center">
                <div class="col-3">
                  <p class="text-right">Valid thru</p>
                </div>
                <div class="col-4">
                  <h4>03/23</h4>
                </div>
              </div>
            </div>
            <div>
              <h5>Elena Calvillo</h5>
            </div>
          </div>
        </div>
      </div>
    </div>

@import url("https://fonts.googleapis.com/css?family=Inconsolata:400,700");

body {
  color: white;
  font-family: "Inconsolata", monospace;
  line-height: 1;
  -webkit-text-shadow: 0px 10px 25px rgba(0, 0, 0, 0.3);
  -moz-text-shadow: 0px 10px 25px rgba(0, 0, 0, 0.3);
  text-shadow: 0px 10px 25px rgba(0, 0, 0, 0.3);
}

.creditcard {
  background: #1fddff;
  background: -webkit-linear-gradient(to left bottom, #1fddff, #f29492);
  background: linear-gradient(to left bottom, #1fddff, #f29492);
  border-radius: 15px;
  -webkit-box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.3);
  padding: 5% 10%;
  margin-top: 30px;
}

.chip {
  width: 50px;
}