<style>

​

  html,

  body,

  header,

  .view {

    height: 100%;

  }

​

  @media (max-width: 740px) {

    html,

    body,

    header,

    .view {

      height: 100vh;

    }

  }

​

  .top-nav-collapse {

    background-color: #78909c !important;

  }

​

  .navbar:not(.top-nav-collapse) {

    background: transparent !important;

  }

​

  @media (max-width: 991px) {

   .navbar:not(.top-nav-collapse) {

    background: #78909c !important;

   }

  }

  h1 {

    letter-spacing: 8px;

  }

​

  h5 {

    letter-spacing: 3px;

  }

​

  .hr-light {

    border-top: 3px solid #fff;

    width: 80px;

  }

​

</style>

​

<!-- Main navigation -->

<header>

  <!--Navbar-->

  <nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">

    <div class="container">

      <a class="navbar-brand" href="#"><strong>MDB</strong></a>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7"

        aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">

        <span class="navbar-toggler-icon"></span>

      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent-7">

        <ul class="navbar-nav mr-auto">

          <li class="nav-item active">

            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

          </li>

          <li class="nav-item">

            <a class="nav-link" href="#">Link</a>

          </li>

          <li class="nav-item">

            <a class="nav-link" href="#">Profile</a>

          </li>

        </ul>

        <form class="form-inline">

          <div class="md-form my-0">

            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">

          </div>

        </form>

      </div>

    </div>

  </nav>

  <!-- Navbar -->

  <!-- Full Page Intro -->

  <div class="view jarallax" data-jarallax='{"speed": 0.2}' style="background-image: url('https://mdbootstrap.com/img/Photos/Others/img%20%2848%29.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center;">

    <!-- Mask & flexbox options-->

    <div class="mask rgba-black-light d-flex justify-content-center align-items-center">

      <!-- Content -->

      <div class="container">

        <!--Grid row-->

        <div class="row">

          <!--Grid column-->

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

            <h1 class="h1-reponsive white-text text-uppercase font-weight-bold mb-0 pt-md-5 pt-5 wow fadeInDown"

              data-wow-delay="0.3s"><strong>Minimalist intro</strong></h1>

            <hr class="hr-light my-4 wow fadeInDown" data-wow-delay="0.4s">

            <h5 class="text-uppercase mb-4 white-text wow fadeInDown" data-wow-delay="0.4s"><strong>Photography

                & design</strong></h5>

            <a class="btn btn-outline-white wow fadeInDown" data-wow-delay="0.4s">portfolio</a>

            <a class="btn btn-outline-white wow fadeInDown" data-wow-delay="0.4s">About me</a>

          </div>

          <!--Grid column-->

        </div>

        <!--Grid row-->

      </div>

      <!-- Content -->

    </div>

    <!-- Mask & flexbox options-->

  </div>

  <!-- Full Page Intro -->

</header>

<!-- Main navigation -->