<header class="container" role="banner">
header

{{#search}} {{>molecules-search}} {{/search}}


</header>
<nav class="container" role="navigation">
navs
</nav>
<main class="container" role="main">

  <div class="row">
    <div class="col-lg-4 col-md-6 col-sm-12 col-12 d-flex align-items-stretch pb-4">
      <div class="card w-100">
        <figure>
          <img class="card-img-top" src="../../images/dp.png" alt="deadpool mocny... co vlastne?">
          <figcaption>Vovkošnej gumídek ten hulk</figcaption>
        </figure>
        <div class="card-body">
          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>
    </div>
    <div class="col-lg-4 col-md-6 col-sm-12 col-12 d-flex align-items-stretch pb-4">
      <div class="card w-100">
        <div class="card-body">
          <h4 class="h4">nadpis 4. urovne a fakt dlouhej nadpis</h4>
          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
        </div>
        <figure>
          <img class="card-img-bottom" src="../images/hulk.jpg" alt="deadpool mocny... co vlastne?">
          <figcaption>Pockej az se zresponzivnime!</figcaption>
        </figure>
      </div>
    </div>
    <form class="col-lg-4 col-md-12 col-sm-12 col-12 d-flex align-items-stretch pb-4" action="" method="">

      <div class="card w-100">
        <div class="card-body">
          {{#inputs}}{{>molecules-input-with-label}}{{/inputs}}
        </div>
        <div class="card-footer">
          {{#formButton}} {{>atoms-buttons}} {{/formButton}}
        </div>
      </div>

    </form>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <h2 class="h2">Nadpis druhe urovne</h2>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-4 col-md-6 col-sm-12 col-12 d-flex align-items-stretch pb-4">
      <div class="card w-100">
        <div class="card-body">
          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>
    </div>
    <div class="col-lg-4 col-md-6 col-sm-12 col-12 d-flex align-items-stretch pb-4">
      <div class="card w-100">
        <div class="card-body">
          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
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-md-12 col-sm-12 col-12 d-flex align-items-stretch pb-4" action="" method="">

      <div class="card w-100">
        <div class="card-body">
          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>

    </div>
  </div>

  <div class="row">
    <div class="col-lg-8 col-md-6 col-sm-12 col-12 d-flex align-items-stretch pb-4">
      <div class="card w-100">
        <div class="card-body">
          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>
    </div>
    <div class="col-lg-4 col-md-6 col-sm-12 col-12 d-flex align-items-stretch pb-4">
      <div class="card w-100">
        <div class="card-body">
          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>
    </div>
  </div>

  <div class="row">
    <div class="col-lg-4 col-md-6 col-sm-12 col-12 d-flex align-items-stretch pb-4">
      <div class="card w-100">
        <div class="card-body">
          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>
    </div>
    <div class="col-lg-8 col-md-6 col-sm-12 col-12 d-flex align-items-stretch pb-4">
      <div class="card w-100">
        <div class="card-body">
          <figure>
            <img class="card-img-top w-50 w-sm-100 float-left pr-3" src="../images/dp.png" alt="deadpool mocny... co vlastne?">
          </figure>
          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>
    </div>
  </div>

  <div class="row">
    <div class="col-lg-3 col-md-6 col-sm-12 col-12 d-flex align-items-stretch pb-4">
      <div class="card w-100">
        <div class="card-body">
          <h1 class="h1">nadpis Prvni urovne co je docela dlouhej</h1>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
            a deserunt mollit anim id est laborum.
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-6 col-sm-12 col-12 d-flex align-items-stretch pb-4">
      <div class="card w-100">
        <div class="card-body">
          <h2 class="h2">nadpis druhe urovne co je docela dlouhej</h2>
            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 nosicia deserunt mollit anim id est laborum.
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-6 col-sm-12 col-12 d-flex align-items-stretch pb-4">
      <div class="card w-100">
        <div class="card-body">
          <h3 class="h3">nadpis treti urovne co je docela dlouhej</h3>
            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  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>
    </div>
    <div class="col-lg-3 col-md-6 col-sm-12 col-12 d-flex align-items-stretch pb-4">
      <div class="card w-100">
        <div class="card-body">
          <h4 class="h4">nadpis ctvrte urovne co je docela dlouhej</h4>
            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
            pidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-lg-6 col-md-6 col-sm-12 col-12 d-flex align-items-stretch pb-4">
      <div class="card w-100">
        <div class="card-body">
          <h1 class="h1">nadpis Prvni urovne co je docela dlouhej</h1>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
            a deserunt mollit anim id est laborum.
        </div>
      </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-12 col-12 d-flex align-items-stretch pb-4">
      <div class="card w-100">
        <div class="card-body">
          <h2 class="h2">nadpis druhe urovne co je docela dlouhej</h2>
            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 nosicia deserunt mollit anim id est laborum.
        </div>
      </div>
    </div>
  </div>
</main>

<aside class="container" role="complementary">
asside
</aside>
<footer class="container" role="contentinfo">
footer
</footer>
