<!-- Main layout -->

  <main>

​

    <div  data-speed="100"  class="view jarallax" style="height: 100vh;">

      <img class="jarallax-img" src="https://mdbootstrap.com/img/Photos/Others/img%20%2844%29.jpg" alt="">

      <div class="mask rgba-blue-slight">

        <div class="container flex-center text-center">

          <div class="row mt-5">

            <div class="col-md-12 wow fadeIn mb-3">

              <h1 class="display-3 mb-2 wow fadeInDown" data-wow-delay="0.3s">NATALIE <a class="indigo-text font-weight-bold">SMITH</a></h1>

              <h5 class="text-uppercase mb-3 mt-1 font-weight-bold wow fadeIn" data-wow-delay="0.4s">Web developer &

                graphic designer</h5>

              <a class="btn btn-light-blue btn-lg wow fadeIn" data-wow-delay="0.4s">portfolio</a> <a class="btn btn-indigo btn-lg wow fadeIn"

                data-wow-delay="0.4s">About me</a>

            </div>

          </div>

        </div>

      </div>

    </div>

​

    <div class="container">

​

      <!--Grid row-->

      <div class="row mb-5 pb-4">

​

        <!--Grid column-->

        <div class="col-md-12 text-center">

​

          <h2 class="h1 font-weight-bold light-blue-text my-5 py-4">Lorem ipsum dolor sit amet, consectetur quis elit.</h2>

          <p align="justify">Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque

            provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet,

            veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi

            porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit

            debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit.

            Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus

            quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur

            quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt

            possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet,

            consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores

            maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum

            dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut

            quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate

            reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque

            provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet,

            veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi

            porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit

            debitis amet, veritatis cupiditate reprehenderit.</p>

​

        </div>

        <!--Grid column-->

​

      </div>

      <!--Grid row-->

​

    </div>

​

    <div class="view jarallax">

      <img class="jarallax-img" src="http://mdbootstrap.com/img/Photos/Others/nature4.jpg" alt="">

    </div>

​

  </main>

  <!-- Main layout -->

​

    // object-fit polyfill run

    objectFitImages();

​

    /* init Jarallax */

    jarallax(document.querySelectorAll('.jarallax'));

​

    jarallax(document.querySelectorAll('.jarallax-keep-img'), {

      keepImg: true,

    });

​