<!--Navbar-->

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

​

      <!-- Navbar brand -->

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

​

      <!-- Collapse button -->

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav" aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">

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

      </button>

​

      <!-- Collapsible content -->

      <div class="collapse navbar-collapse" id="basicExampleNav">

​

        <!-- Links -->

        <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="#">Features</a>

          </li>

          <li class="nav-item">

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

          </li>

          <!-- Dropdown -->

          <li class="nav-item dropdown">

            <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>

            <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">

              <a class="dropdown-item" href="#">Action</a>

              <a class="dropdown-item" href="#">Another action</a>

              <a class="dropdown-item" href="#">Something else here</a>

            </div>

          </li>

        </ul>

        <!-- Links -->

​

        <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>

      <!-- Collapsible content -->

​

    </nav>

    <!--/.Navbar-->

​

    <!--Carousel Wrapper-->

    <div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">

        <!--Indicators-->

        <ol class="carousel-indicators">

            <li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>

            <li data-target="#carousel-example-2" data-slide-to="1"></li>

            <li data-target="#carousel-example-2" data-slide-to="2"></li>

        </ol>

        <!--/.Indicators-->

​

        <!--Slides-->

        <div class="carousel-inner" role="listbox">

​

            <!--First slide-->

            <div class="carousel-item active">

                <!--Mask-->

                <div class="view">

                  <!--Video source-->

                  <video muted autoplay loop playsinline>

                      <source src="https://mdbootstrap.com/img/video/Lines.mp4" type="video/mp4" />

                  </video>

                  <!-- Carousel content -->

                  <div class="full-bg-img flex-center mask rgba-indigo-light white-text">

                    <ul class="animated fadeInUp col-md-12 list-unstyled list-inline">

                      <li>

                        <h1 class="font-weight-bold text-uppercase">Material Design for Bootstrap 4</h1>

                      </li>

                      <li>

                        <p class="font-weight-bold text-uppercase py-4">The most powerful and free UI KIT for Bootstrap</p>

                      </li>

                      <li class="list-inline-item">

                        <a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-unique btn-lg btn-rounded mr-0">Sign up!</a>

                      </li>

                      <li class="list-inline-item">

                        <a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-cyan btn-lg btn-rounded ml-0">Learn more</a>

                      </li>

                    </ul>

                  </div>

                </div>

                <!--/Mask-->

            </div>

            <!--/First slide-->

​

            <!--Second slide-->

            <div class="carousel-item">

                <!--Mask color-->

                <div class="view">

                    <!--Video source-->

                    <video muted autoplay loop playsinline>

                        <source src="https://mdbootstrap.com/img/video/animation-intro.mp4" type="video/mp4" />

                    </video>

                    <!-- Carousel content -->

                    <div class="full-bg-img flex-center mask rgba-purple-light white-text">

                      <ul class="animated fadeInUp col-md-12 list-unstyled">

                        <li>

                          <h1 class="font-weight-bold text-uppercase">Lots of tutorials at your disposal</h1>

                        </li>

                        <li>

                          <p class="font-weight-bold text-uppercase py-4">And all of them are FREE!</p>

                        </li>

                        <li>

                          <a target="_blank" href="https://mdbootstrap.com/bootstrap-tutorial/" class="btn btn-pink btn-rounded btn-lg">Start learning</a>

                        </li>

                      </ul>

                    </div>

                </div>

                <!--/Mask color-->

            </div>

            <!--/Second slide-->

​

            <!--Third slide-->

            <div class="carousel-item">

                <!--Mask color-->

                <div class="view">

                    <!--Video source-->

                    <video muted autoplay loop playsinline>

                        <source src="https://mdbootstrap.com/images/video/Tropical.mp4" type="video/mp4" />

                    </video>

                    <!-- Carousel content -->

                    <div class="full-bg-img flex-center mask rgba-blue-light white-text">

                      <ul class="animated fadeInUp col-md-12 list-unstyled">

                        <li>

                          <h1 class="font-weight-bold text-uppercase">Visit our support forum</h1></li>

                        <li>

                          <p class="font-weight-bold text-uppercase py-4">Our community can help you with any question</p>

                        </li>

                        <li>

                          <a target="_blank" href="https://mdbootstrap.com/forums/forum/support/" class="btn btn-lg btn-indigo btn-rounded">Support forum</a>

                        </li>

                      </ul>

                    </div>

                </div>

                <!--/Mask color-->

            </div>

            <!--/Third slide-->

        </div>

        <!--/.Slides-->

​

        <!--Controls-->

        <a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev">

            <span class="carousel-control-prev-icon" aria-hidden="true"></span>

            <span class="sr-only">Previous</span>

        </a>

        <a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next">

            <span class="carousel-control-next-icon" aria-hidden="true"></span>

            <span class="sr-only">Next</span>

        </a>

        <!--/.Controls-->

    </div>

    <!--/.Carousel Wrapper-->

​

    <!--Footer-->

    <footer class="page-footer text-center text-md-left pt-4">

      <!--Footer Links-->

      <div class="container-fluid">

        <div class="row">

          <!--First column-->

          <div class="col-md-3 offset-md-1">

            <h5 class="font-weight-bold text-uppercase mb-4">About material design</h5>

            <p>Material Design (codenamed Quantum Paper) is a design language developed by Google. </p>

            <p>Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p>

          </div>

          <!--/.First column-->

          <hr class="clearfix w-100 d-md-none">

          <!--Second column-->

          <div class="col-md-2 offset-md-1">

            <h5 class="font-weight-bold text-uppercase mb-4">First column</h5>

            <ul class="list-unstyled">

              <li><a href="#!">Link 1</a></li>

              <li><a href="#!">Link 2</a></li>

              <li><a href="#!">Link 3</a></li>

              <li><a href="#!">Link 4</a></li>

            </ul>

          </div>

          <!--/.Second column-->

          <hr class="clearfix w-100 d-md-none">

          <!--Third column-->

          <div class="col-md-2">

            <h5 class="font-weight-bold text-uppercase mb-4">Second column</h5>

            <ul class="list-unstyled">

              <li><a href="#!">Link 1</a></li>

              <li><a href="#!">Link 2</a></li>

              <li><a href="#!">Link 3</a></li>

              <li><a href="#!">Link 4</a></li>

            </ul>

          </div>

          <!--/.Third column-->

          <hr class="clearfix w-100 d-md-none">

          <!--Fourth column-->

          <div class="col-md-2">

            <h5 class="font-weight-bold text-uppercase mb-4">Third column</h5>

            <ul class="list-unstyled">

              <li><a href="#!">Link 1</a></li>

              <li><a href="#!">Link 2</a></li>

              <li><a href="#!">Link 3</a></li>

              <li><a href="#!">Link 4</a></li>

            </ul>

          </div>

          <!--/.Fourth column-->

        </div>

      </div>

      <!--/.Footer Links-->

      <hr>

      <!--Call to action-->

      <div class="call-to-action text-center">

        <h4 class="my-4">Material Design for Bootstrap</h4>

        <ul class="list-unstyled list-inline mb-4">

          <li>

            <h5 class="my-4">Get our UI KIT for free</h5></li>

          <li class="list-inline-item"><a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-info">Sign up!</a></li>

          <li class="list-inline-item"><a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default">Learn more</a></li>

        </ul>

      </div>

      <!--/.Call to action-->

      <!--Copyright-->

      <div class="footer-copyright text-center">

        <div class="container-fluid py-3">

          © 2018 Copyright: <a href="https://mdbootstrap.com"> MDBootstrap.com </a>

        </div>

      </div>

      <!--/.Copyright-->

    </footer>

    <!--/.Footer-->

​

    /* Navigation*/

      .navbar {

        background-color: transparent;

      }

      .scrolling-navbar {

        transition: background .5s ease-in-out, padding .5s ease-in-out;

      }

      .top-nav-collapse {

        background-color: #34456a;

      }

      footer.page-footer {

        background-color: #34456a;

      }

      @media only screen and (max-width: 768px) {

        .navbar {

          background-color: #34456a;

        }

      }

​

      /* Necessary for full page carousel*/

      html,

      body,

      .view {

        height: 100%;

      }

​

      /* Carousel*/

      .carousel,

      .carousel-item,

      .carousel-item.active {

        height: 100%;

      }

      .carousel-inner {

        height: 100%;

      }

      .carousel .carousel-item video {

        min-width: 100%;

        min-height: 100%;

        width: auto;

        height: auto;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

      }

​