<header role="banner" class="mb-5">
  <div class="card card-body card--shadow">
    <div class="container">
      <div class="row">
        <div class="col-lg-3">
          <img src="{{img_src}}/logo-velke.svg" alt="logo moneta">
        </div>
        <div class="col-lg-6">
          <h1 class="h4 pb-0 text-center">
            Rychlá půjčka na cokoliv
          </h1>
        </div>

        <div class="col-lg-3">
          <p class="h4 pb-0 text-right"> <i class="icon icon--phone"></i> 224 444 555</p>
        </div>
      </div>
    </div>
  </div>
</header>
<div class="container">
  <div class="row">
    <div class="col-lg-8">
      <main role="main" class="card card-body card--shadow p-5">
        <h1 class="h2">Zadejte prosím vaše kontaktní údaje</h1>
        <form  action="" method="post">
          <div class="row">
            <div class="col-lg-6">
              <div class="form-group ">
                <label for="moleculeId" id="labelId" aria-label="" aria-labelledby="" class="form-control-label ">Jméno <span class="required"> </span> </label>
                <input type="text" aria-labelledby="" aria-required="true" id="" name="input" tabindex="" placeholder="Patternlab Input" class="form-control " value="">
              </div>
            </div>
            <div class="col-lg-6">
              <div class="form-group ">
                <label for="moleculeId" id="labelId" aria-label="" aria-labelledby="" class="form-control-label ">Příjmení <span class="required"> </span> </label>
                <input type="text" aria-labelledby="" aria-required="true" id="" name="input" tabindex="" placeholder="Patternlab Input" class="form-control " value="">
              </div>
            </div>
            <div class="col-lg-6">
              <div class="form-group ">
                <label for="moleculeId" id="labelId" aria-label="" aria-labelledby="" class="form-control-label ">E-mail <span class="required"> </span> </label>
                <input type="email" aria-labelledby="" aria-required="true" id="" name="input" tabindex="" placeholder="Patternlab Input" class="form-control " value="">
              </div>
            </div>
            <div class="col-lg-6">
              <div class="form-group ">
                <label for="moleculeId" id="labelId" aria-label="" aria-labelledby="" class="form-control-label ">Telefon <span class="required"> </span> </label>
                <input type="tel" aria-labelledby="" aria-required="true" id="" name="input" tabindex="" placeholder="Patternlab Input" class="form-control " value="">
              </div>
            </div>
          </div>
          <div class="line mb-4 mt-4"></div>
          <label class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" name="" value="">
            <span class="custom-control-indicator"></span>
            <span class="custom-control-description">Chci se dozvědět o speciálních <a href="#">marketingových nabídkách</a> a proto souhlasím s jejich zasíláním. </span>
          </label>
          <label class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" name="" value="">
            <span class="custom-control-indicator"></span>
            <span class="custom-control-description">Souhlasím s tím, že informace týkající se procesu zalůožení kreditní karty a běžného účtu mohou být jednorázově zaslány <a href="#" class="link">nešifrovaným způsobem</a>
            na výše uvedenou emailovou adresu a telefonní číslo. Dále beru na vědomí <a href="#" class="link">zásady zpracování osobních údajů</a> ve finanční skupině MONETA.
            </span>
          </label>
          <div class="float-right card card-body pl-0 pr-0">
            <button type="button" class="btn btn-primary" name="button">Pokračovat</button>
          </div>
        </form>
      </main>
    </div>
    <div class="col-lg-4">
      <aside class="card card-body pt-0 pr-0 card--transparent">
        <h4 class="h4">Co vás čeká?</h4>
        <ul class="stepper mt-2 pl-0">
          <li class="stepper-item row">
            <div class="col-2">
              <div class="badge badge-primary badge-rounded badge-stepper stepper-done">
                <i class="icon icon--old-tick"></i>
              </div>
            </div>
            <div class="col-10">
              <div class="stepper-text">Nastavení kreditní karty. Výše úvěrového rámce <strong>30 000 Kč</strong> </div>
            </div>
          </li>
          <li class="stepper-item row">
            <div class="col-2">
              <span class="badge badge-primary badge-rounded badge-stepper">2</span>
            </div>
            <div class="col-10">
              <div class="stepper-text"> text </div>
            </div>
          </li>
          <li class="stepper-item stepper-item--mid row">
            <div class="col-2">
              <span class="badge badge-primary badge-rounded badge-stepper--mid-step"></span>
            </div>
            <div class="col-10">
              <div class="stepper-text"> text </div>
            </div>
          </li>
          <li class="stepper-item stepper-item--mid row stepper-item--disabled">
            <div class="col-2">
              <span class="badge badge-primary badge-rounded badge-stepper--mid-step badge-stepper--mid-step__disabled"></span>
            </div>
            <div class="col-10">
              <div class="stepper-text"> text </div>
            </div>
          </li>
          <li class="stepper-item stepper-item--disabled row">
            <div class="col-2">
              <span class="badge badge-primary badge-rounded badge-stepper">3</span>
            </div>
            <div class="col-10">
              <div class="stepper-text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              </div>
            </div>
          </li>
          <li class="stepper-item stepper-item--disabled row">
            <div class="col-2">
              <span class="badge badge-primary badge-rounded badge-stepper">4</span>
            </div>
            <div class="col-10">
              <div class="stepper-text">
                Peníze
              </div>
            </div>
          </li>
        </ul>
      </aside>
    </div>
  </div>
</div>
