frame_3.html

<div id="payframe" class="row">
  <div class="view column">
    <!-- Navigation-->
    <nav class="row">
      <div class="column">
        <ul class="tabs">
          <li class="cards"> Банковские карты</li>
          <li class="sms">   Баланс мобильного</li>
          <li class="emoney">Электронные деньги</li>
        </ul>
      </div>
    </nav>
    <!-- Body-->
    <div class="body">
      <!-- Main-->
      <main class="column">
        <header id="company">Альянс-Телеком</header>
        <hr/>
        <section class="bill">Счёт на оплату<br/><span id="bill">37289492837498724</span></section>
        <hr/>
        <section id="description">Продление услуги Интернет</section>
        <hr/>
        <footer class="summary">Сумма к оплате<br/><span id="summary">1 500,00 ₽</span></footer>
      </main>
      <!-- Forms-->
      <section class="content row">
        <!-- Cards-->
        <form id="cards-form" class="column">
          <div class="row">
            <div class="column owner-block">
              <label class="owner">Держатель карты
                <input id="frame-owner" type="text" name="owner" placeholder="NAME SURNAME" pattern="[a-zA-Z]" title="Латинскими строчными буквами" required="required"/>
              </label>
            </div>
          </div>
          <div class="row">
            <div class="column card-block">
              <label class="card">Номер карты
                <input id="frame-card" type="text" name="card" placeholder="1111  2222  3333  4444" pattern="[0-9]{14,16}" maxlength="16" title="От 14 до 16 цифр" required="required"/>
              </label>
            </div>
          </div>
          <div class="row">
            <div class="column expire-block">
              <label class="expire">Дата истечения срока
                <div class="row expire-date">
                  <div class="column expire-day-block">
                    <select id="frame-expire-day" name="expire_day">
                      <option value="01">01</option>
                      <option value="02">02</option>
                      <option value="03">03</option>
                      <option value="04">04</option>
                      <option value="05">05</option>
                      <option value="06">06</option>
                      <option value="07">07</option>
                      <option value="08">08</option>
                      <option value="09">09</option>
                      <option value="10">10</option>
                      <option value="11">11</option>
                      <option value="12">12</option>
                    </select>
                  </div>
                  <div class="column expire-year-block">
                    <select id="frame-expire-year" name="expire_year">
                      <option value="2015">2015</option>
                      <option value="2016">2016</option>
                      <option value="2017">2017</option>
                      <option value="2018">2018</option>
                      <option value="2019">2019</option>
                      <option value="2020">2020</option>
                      <option value="2021">2021</option>
                      <option value="2022">2022</option>
                      <option value="2023">2023</option>
                      <option value="2024">2024</option>
                      <option value="2025">2025</option>
                      <option value="2026">2026</option>
                      <option value="2027">2027</option>
                    </select>
                  </div>
                </div>
              </label>
            </div>
            <div class="column cvv-block">
              <label class="cvv">CVV2/CVC2
                <input id="frame-code" type="text" name="cvv" placeholder="111" min="000" max="999" maxlength="3" pattern="[0-9]{3}" title="3 цифры" required="required"/>
              </label>
            </div>
          </div>
          <div class="row">
            <div class="column email-block">
              <label class="email">Электронная почта
                <input id="frame-email" type="email" name="email" placeholder="yourmail@yourmail.com" pattern="/^[a-zA-Z0-9.!#$%&amp;'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/" required="required"/>
              </label>
            </div>
          </div>
        </form>
        <!-- SMS-->
        <form id="sms-form" class="column">
          <div class="row">
            <div class="column">
              <label class="telepthone">Номер телефона
                <input id="telephone" type="tel" name="telephone" placeholder="+0 (000) 000-00-00" title="Ваш активный номер мобильного телефона" required="required"/>
              </label>
            </div>
          </div>
          <div class="row">
            <div class="column">
              <label class="account">Лицевой счёт
                <input type="text" name="account" pattern="[0-9]" placeholder="111333" required="required"/>
              </label>
            </div>
          </div>
          <div class="row">
            <div class="column">
              <label class="email">Электронная почта
                <input type="email" name="email" placeholder="youremail@mail.com" pattern="/^[a-zA-Z0-9.!#$%&amp;'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/" required="required"/>
              </label>
            </div>
          </div>
        </form>
        <!-- Emoney-->
        <form id="emoney-form" class="column">
          <div class="row">
            <div class="column">
              <label class="ewallet">Электронный счёт
                <select id="select-wallet" name="ewallet">
                  <option value="WebMoney" selected="selected">WebMoney</option>
                  <option value="YandexMoney">YandexMoney</option>
                  <option value="QIWI">QIWI</option>
                  <option value="Деньги@Mail.ru">Деньи@Mail.ru</option>
                </select>
              </label>
            </div>
          </div>
          <div class="row">
            <div class="column">
              <label class="email">Электронная почта
                <input type="email" name="email" placeholder="youremail@mail.com" pattern="/^[a-zA-Z0-9.!#$%&amp;'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/" required="required"/>
              </label>
            </div>
          </div>
        </form>
      </section>
    </div>
    <!-- Footer-->
    <footer class="row">
      <div class="column">
        <div class="row">
          <div class="action column text-center">
            <button id="pay_button" href="" class="button cta">Оплатить</button>
          </div>
        </div>
        <div class="row">
          <div class="logos-block column">
            <ul>
              <li class="visa_verified"></li>
              <li class="mastercard_secure"></li>
              <li class="pci_dss"></li>
            </ul>
          </div>
          <div class="support-block column">
            <footer class="text-right">Служба поддержки<br/><a href="mailto:pay@arsenalpay.ru">pay@arsenalpay.ru</a></footer>
          </div>
        </div>
      </div>
    </footer>
  </div>
</div>