Mosaic

Zigzag based blocks with images & text

Mosaic

<div class="mosaic">
  <div class="row">
    <!-- [1][1] -->
    <div class="col-xs-12 col-md-6">
      <div class="mosaic-image"></div>
    </div>
    <!-- [1][2] -->
    <div class="col-xs-12 col-md-6">
      <div class="mosaic-wrapper">
        <div class="mosaic-text">
          <h2 class="text-uppercase m-b">Interesting stuff</h2>
          <p class="content m-b">Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.</p>
          <p class="content m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis</p>
        </div>
      </div>
    </div>
    <!-- [2][2] -->
    <div class="col-xs-12 col-md-6 col-md-push-6">
      <div class="mosaic-image-2"></div>
    </div>
    <!-- [2][1] -->
    <div class="col-xs-12 col-md-6 col-md-pull-6">
      <div class="mosaic-wrapper">
        <div class="mosaic-text">
          <h2 class="text-uppercase m-b">More interesting stuff</h2>
          <p class="content m-b">Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.</p>
          <p class="content m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis</p>
        </div>
      </div>
    </div>
    <!-- [3][1] -->
    <div class="col-xs-12 col-md-6">
      <div class="mosaic-wrapper">
        <div class="mosaic-inner-video">
          <iframe src='//www.youtube.com/embed/M9ITWjBPwDA' allowfullscreen></iframe>
        </div>  
      </div>
    </div>
    <!-- [3][2] -->
    <div class="col-xs-12 col-md-6">
      <div class="mosaic-wrapper">
        <div class="mosaic-text">
          <h2 class="text-uppercase m-b">Embed video description</h2>
          <p class="content m-b">Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.</p>
          <p class="content m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis</p>
        </div>
      </div>
    </div>
    <!-- [4][2] -->
    <div class="col-xs-12 col-md-6 col-md-push-6">
      <div class="mosaic-image-3"></div>
    </div>
    <!-- [4][1] -->
    <div class="col-xs-12 col-md-6 col-md-pull-6">
      <div class="mosaic-wrapper">
        <div class="mosaic-text">
          <h2 class="text-uppercase m-b">Neat and clean code</h2>
          <p class="content m-b">Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.</p>
          <p class="content m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis</p>
        </div>
      </div>
    </div>
  </div>
</div>

Interesting stuff

Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis

More interesting stuff

Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis

Embed video description

Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis

Neat and clean code

Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis

Mosaic alternative

<div class="mosaic">
  <div class="row">
    <!-- [1][2] -->
    <div class="col-xs-12 col-md-push-6 col-md-6">
      <div class="mosaic-image"></div>
    </div>
    <!-- [1][1] -->
    <div class="col-xs-12 col-md-pull-6 col-md-6">
      <div class="mosaic-wrapper">
        <div class="mosaic-text">
          <h2 class="text-uppercase m-b">Interesting stuff</h2>
          <p class="content m-b-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis. Fusce quis nunc dictum, fringilla nisi eu, bibendum ante. Donec eu aliquet elit. Nulla facilisi. Nullam dignissim imperdiet condimentum</p>
          <a href="#" class="button button-rounded button-theme text-uppercase">Continue</a>
        </div>
      </div>
    </div>
    <!-- [2][1] -->
    <div class="col-xs-12 col-md-6">
      <div class="mosaic-image-2"></div>
    </div>
    <!-- [2][2] -->
    <div class="col-xs-12 col-md-6">
      <div class="mosaic-wrapper">
        <div class="mosaic-text">
          <h2 class="text-uppercase m-b">More interesting stuff</h2>
          <p class="content m-b-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis. Fusce quis nunc dictum, fringilla nisi eu, bibendum ante. Donec eu aliquet elit. Nulla facilisi. Nullam dignissim imperdiet condimentum</p>
          <a href="#" class="button button-rounded button-theme text-uppercase">Continue</a>
        </div>
      </div>
    </div>
    <!-- [3][2] -->
    <div class="col-xs-12 col-md-6 col-md-push-6">
      <div class="mosaic-image-3"></div>
    </div>
    <!-- [3][1] -->
    <div class="col-xs-12 col-md-6 col-md-pull-6">
      <div class="mosaic-wrapper">
        <div class="mosaic-text">
          <h2 class="text-uppercase m-b">Neat and clean code</h2>
          <p class="content">Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.</p>
          <p class="content m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis</p>
        </div>
      </div>
    </div>
    <!-- [4][1] -->
    <div class="col-xs-12 col-md-6">
      <div class="mosaic-wrapper">
        <div class="mosaic-inner-video">
          <iframe src='//www.youtube.com/embed/M9ITWjBPwDA' allowfullscreen></iframe>
        </div>  
      </div>
    </div>
    <!-- [4][2] -->
    <div class="col-xs-12 col-md-6">
      <div class="mosaic-wrapper">
        <div class="mosaic-inner">
          <h2 class="mosaic-icon-title h1">We hope to cooperate with you</h2>
          <i class='fa fa-handshake-o'></i>
        </div>
      </div>
    </div>
  </div>
</div>

Interesting stuff

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis. Fusce quis nunc dictum, fringilla nisi eu, bibendum ante. Donec eu aliquet elit. Nulla facilisi. Nullam dignissim imperdiet condimentum

Continue

More interesting stuff

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis. Fusce quis nunc dictum, fringilla nisi eu, bibendum ante. Donec eu aliquet elit. Nulla facilisi. Nullam dignissim imperdiet condimentum

Continue

Neat and clean code

Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis

We hope to cooperate with you