<!-- FAB BUTTON -->
<div id="fab" class="fabCollapse" class="animate zoomIn">
  <i class="fa fa-shopping-cart"></i>
  <div class="fabContent">
    <div class="card">
      <div class="card-body">
        <div class="row">
          <div class="col-6">
            <img src="https://www.marketphones.com/20377-large_default/google-pixel-3a-4gb64gb-blanco.jpg"
              class="img-responsive mt-2" alt="">
          </div>
          <div class="col-6">
            <a href="#" class="btn-link">Google Pixel 3a 4GB/64GB Blanco</a>
            <h6 class="font-weight-bold text-success">$399USD</h6>
          </div>
        </div>
        <hr>
        <div class="row">
          <div class="col-6">
            <img src="https://images-na.ssl-images-amazon.com/images/I/91NjUxVSODL._SX466_.jpg"
              class="img-responsive mt-2" alt="">
          </div>
          <div class="col-6">
            <a href="#" class="btn-link">Google Pixel 3a Case</a>
            <h6 class="font-weight-bold text-success">$40USD</h6>
          </div>
        </div>
      </div>
    </div>
    <div class="text-center mt-3">
      <a href="#" class="btn btn-block btn-primary btn-shopping-cart">Pagar $449</a>
    </div>
  </div>
</div>
<!-- END FAB BUTTON -->

/* FAB BTN */
.fabCollapse {
  display: block;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 999;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #6002EE;
  color: #ffffff;
  cursor: pointer;
  padding: 13px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  /* 6dp */
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.fabContent {
  display: none;
}

.fabOpen {
  background-color: #ffffff;
  width: 300px;
  height: 300px;
  border-radius: 8px;
  /* 7dp */
  box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  overflow-y: scroll;
}

.fabOpen svg {
  display: none;
}

/* IMAGES */
.img-responsive {
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* KEYFRAMES */
@media (min-width: 992px) {
  .animate {
    animation-duration: 0.2s;
    -webkit-animation-duration: 0.2s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
  }
}

/* On screens that are 992px or less*/
@media screen and (max-width: 992px) {
  .modal {
    width: 70%;
  }

  .fabOpen {
    height: 60%;
  }
}

/* On screens that are 600px or less*/
@media screen and (max-width: 600px) {
  .modal {
    width: 90%;
  }

  .fabOpen {
    right: 0;
    height: 100%;
    width: 100%;
    bottom: 0;
  }
}

$(document).ready(function() {
  $("#fab").click(function() {
    $("#fab").toggleClass("fabOpen");
    $(".fabContent").toggleClass("d-block");
  });
});