<style>

​

  html,

  body,

  header,

  .view {

    height: 100%;

  }

​

</style>

​

<!-- Main navigation -->

<header>

​

  <!-- Full Page Intro -->

  <div class="view deep-purple darken-3">

    <!-- Mask & flexbox options-->

    <div class="mask">

      <!-- Content -->

      <div class="container h-100">

        <!--Grid row-->

        <div class="row align-items-center h-100">

          <!--Grid column-->

          <div class="col-md-6 wow fadeInLeft" data-wow-delay="0.2s">

            <h1 class="white-text mb-4">Better Website Design, More Conversion</h1>

            <p class="mb-4 pb-2 white-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam vitae, culpa qui officia deserunt labor debitis.</p>

            <button type="button" class="btn btn-outline-white btn-md ml-md-0">Get started</button>

            <button type="button" class="btn btn-white btn-md">Get started</button>

          </div>

          <!--Grid column-->

          <!--Grid column-->

          <div class="col-md-6 wow fadeInRight" data-wow-delay="0.2s">

            <img src="https://mdbootstrap.com/img/Mockups/Transparent/Small/cards2.png" alt="" class="img-fluid">

          </div>

          <!--Grid column-->

        </div>

        <!--Grid row-->

      </div>

      <!-- Content -->

    </div>

    <!-- Mask & flexbox options-->

  </div>

  <!-- Full Page Intro -->

</header>

<!-- Main navigation -->