<!--Modal: Name-->

    <div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

      <div class="modal-dialog modal-lg" role="document">

​

        <!--Content-->

        <div class="modal-content">

​

          <!--Body-->

          <div class="modal-body mb-0 p-0">

​

            <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">

              <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/A3PDXmYoF5U"

                allowfullscreen></iframe>

            </div>

​

          </div>

​

          <!--Footer-->

          <div class="modal-footer justify-content-center">

            <span class="mr-4">Spread the word!</span>

            <a type="button" class="btn-floating btn-sm btn-fb"><i class="fa fa-facebook"></i></a>

            <!--Twitter-->

            <a type="button" class="btn-floating btn-sm btn-tw"><i class="fa fa-twitter"></i></a>

            <!--Google +-->

            <a type="button" class="btn-floating btn-sm btn-gplus"><i class="fa fa-google-plus"></i></a>

            <!--Linkedin-->

            <a type="button" class="btn-floating btn-sm btn-ins"><i class="fa fa-linkedin"></i></a>

​

            <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>

​

          </div>

​

        </div>

        <!--/.Content-->

​

      </div>

    </div>

    <!--Modal: Name-->

​

​

<!-- 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 mt-0">

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

          </div>

        </form>

      </div>

    </div>

  </nav>

  <!-- Full Page Intro -->

  <div class="view" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/architecture.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center;">

    <!-- Mask & flexbox options-->

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

      <!-- Content -->

      <div class="container">

        <!--Grid row-->

        <div class="row">

          <!--Grid column-->

          <div class="col-md-6 white-text text-center text-md-left mt-xl-5 mb-5 wow fadeInLeft" data-wow-delay="0.3s">

            <h1 class="h1-responsive font-weight-bold mt-sm-5">Make purchases with our app </h1>

            <hr class="hr-light">

            <h6 class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi

              fuga nesciunt

              dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea dolor molestiae

              iste.</h6>

            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1">

  Launch demo modal

</button>

          </div>

          <!--Grid column-->

          <!--Grid column-->

          <div class="col-md-6 col-xl-5 mt-xl-5 wow fadeInRight" data-wow-delay="0.3s">

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

          </div>

          <!--Grid column-->

        </div>

        <!--Grid row-->

      </div>

      <!-- Content -->

    </div>

    <!-- Mask & flexbox options-->

  </div>

  <!-- Full Page Intro -->

</header>

<!-- Main navigation -->

<div class="card card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/gradient1.jpg);">

  <div class="text-white text-center py-5 px-4 my-5">

    <div>

      <h2 class="card-title h1-responsive pt-3 mb-5 font-bold"><strong>Create your beautiful website with MDBootstrap</strong></h2>

      <p class="mx-5 mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,

        optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!

      </p>

      <a class="btn btn-outline-white btn-md"><i class="fa fa-clone left"></i> View project</a>

    </div>

  </div>

</div>