Bezahlungsvarianten-Checkout

by mtenschert

HTML

<link rel="stylesheet" href="https://www.alpinresorts.com/assets/css/main.css">
<div class="payment_method">
  <h3>Bitte wählen Sie Ihr bevorzugtes Zahlungsmittel:</h3>
  <h4>Bezahlen per Karte</h4>
  <section>
    <ul>
      <li>
        <div>
          <img src="https://www.saferpay.com/vt2/Areas/Mobile/Content/Images/CardLogos/CardType_19286.png" alt="VISA" title="VISA" class="pm_visa">
        </div>
      </li>
      <li>
        <div>
          <img src="https://www.saferpay.com/vt2/Areas/Mobile/Content/Images/CardLogos/CardType_19269.png" alt="MasterCard" title="MasterCard" class="pm_mastercard">
        </div>
      </li>
    </ul>
    <br>
  </section>
  <h4>Bezahlen per Online-Banking</h4>
  <section>
    <ul>
      <li>
        <div>
          <img src="https://www.saferpay.com/vt2/Areas/Mobile/Content/Images/CardLogos/CardType_19286.png" alt="VISA" title="VISA">
        </div>
      </li>
      <li>
        <div>
          <img src="https://www.saferpay.com/vt2/Areas/Mobile/Content/Images/CardLogos/CardType_19269.png" alt="MasterCard" title="MasterCard">
        </div>
      </li>
    </ul>
    <br>
  </section>
  <h4>Bezahlung per Online Zahlungsdienst</h4>
  <section>
    <ul>
      <li>
        <div>
          <img src="https://www.saferpay.com/vt2/Areas/Mobile/Content/Images/CardLogos/CardType_19286.png" alt="VISA" title="VISA">
        </div>
      </li>
      <li>
        <div>
          <img src="https://www.saferpay.com/vt2/Areas/Mobile/Content/Images/CardLogos/CardType_19269.png" alt="MasterCard" title="MasterCard">
        </div>
      </li>
    </ul>
    <br>
  </section>
</div>

CSS

.payment_method {
  background: #f0f1f2;
  padding: 15px;
}

.payment_method ul {
  padding: 0px !important;
  margin-bottom: 15px;
  display: block;
}

.payment_method ul li {
  display: block;
  float: left;
  margin-right: 10px;
}

.payment_method ul div {
  width: 140px;
  background: white;
  padding: 5px 5px 5px 5px;
  text-align: center;
  border-radius: 10px;
  -webkit-box-shadow: 4px 4px 13px -1px #b5b5b5;
  -moz-box-shadow: 4px 4px 13px -1px #b5b5b5;
  box-shadow: 4px 4px 13px -1px #b5b5b5;
}


.payment_method br {
  clear: left;
}

.payment_method h4 {
  margin-top: 35px;
}

.payment_method img {
  max-width: 80px;
}