<!--Main Navigation-->

<header>

  <style>

    /* Carousel styling */

    #introCarousel,

    .carousel-inner,

    .carousel-item,

    .carousel-item.active {

      height: 100vh;

    }

​

    .carousel-item:nth-child(1) {

      background-image: url('https://mdbootstrap.com/img/Photos/Others/images/76.jpg');

      background-repeat: no-repeat;

      background-size: cover;

      background-position: center center;

    }

​

    .carousel-item:nth-child(2) {

      background-image: url('https://mdbootstrap.com/img/Photos/Others/images/77.jpg');

      background-repeat: no-repeat;

      background-size: cover;

      background-position: center center;

    }

​

    .carousel-item:nth-child(3) {

      background-image: url('https://mdbootstrap.com/img/Photos/Others/images/78.jpg');

      background-repeat: no-repeat;

      background-size: cover;

      background-position: center center;

    }

​

    /* Height for devices larger than 576px */

    @media (min-width: 992px) {

      #introCarousel {

        margin-top: -58.59px;

      }

    }

​

    .navbar .nav-link {

      color: #fff !important;

    }

  </style>

​

  <!-- Navbar -->

  <nav class="navbar navbar-expand-lg navbar-dark d-none d-lg-block" style="z-index: 2000;">

    <div class="container-fluid">

      <!-- Navbar brand -->

      <a class="navbar-brand nav-link" target="_blank" href="https://mdbootstrap.com/docs/standard/">

        <strong>MDB</strong>

      </a>

      <button class="navbar-toggler" type="button" data-mdb-collapse-init data-mdb-target="#navbarExample01"

              aria-controls="navbarExample01" aria-expanded="false" aria-label="Toggle navigation">

        <i class="fas fa-bars"></i>

      </button>

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

        <ul class="navbar-nav me-auto mb-2 mb-lg-0">

          <li class="nav-item active">

            <a class="nav-link" aria-current="page" href="#intro">Home</a>

          </li>

          <li class="nav-item">

            <a class="nav-link" href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow"

               target="_blank">Learn Bootstrap 5</a>

          </li>

          <li class="nav-item">

            <a class="nav-link" href="https://mdbootstrap.com/docs/standard/" target="_blank">Download MDB UI KIT</a>

          </li>

        </ul>

​

        <ul class="navbar-nav list-inline">

          <!-- Icons -->

          <li class="">

            <a class="nav-link" href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow"

               target="_blank">

              <i class="fab fa-youtube"></i>

            </a>

          </li>

          <li class="">

            <a class="nav-link" href="https://www.facebook.com/mdbootstrap" rel="nofollow" target="_blank">

              <i class="fab fa-facebook-f"></i>

            </a>

          </li>

          <li class="nav-item">

            <a class="nav-link" href="https://twitter.com/MDBootstrap" rel="nofollow" target="_blank">

              <i class="fab fa-twitter"></i>

            </a>

          </li>

          <li class="nav-item">

            <a class="nav-link" href="https://github.com/mdbootstrap/mdb-ui-kit" rel="nofollow" target="_blank">

              <i class="fab fa-github"></i>

            </a>

          </li>

        </ul>

      </div>

    </div>

  </nav>

  <!-- Navbar -->

​

  <!-- Carousel wrapper -->

  <div id="introCarousel" class="carousel slide carousel-fade shadow-2-strong" data-mdb-carousel-init>

    <!-- Indicators -->

    <div class="carousel-indicators">

      <li data-mdb-target="#introCarousel" data-mdb-slide-to="0" class="active"></li>

      <li data-mdb-target="#introCarousel" data-mdb-slide-to="1"></li>

      <li data-mdb-target="#introCarousel" data-mdb-slide-to="2"></li>

    </div>

​

    <!-- Inner -->

    <div class="carousel-inner">

      <!-- Single item -->

      <div class="carousel-item active">

        <div class="mask" style="background-color: rgba(0, 0, 0, 0.6);">

          <div class="d-flex justify-content-center align-items-center h-100">

            <div class="text-white text-center" data-mdb-theme="dark">

              <h1 class="mb-3">Learn Bootstrap 5 with MDB</h1>

              <h5 class="mb-4">Best & free guide of responsive web design</h5>

              <a class="btn btn-outline-light btn-lg m-2" data-mdb-ripple-init href="https://www.youtube.com/watch?v=c9B4TPnak1A"

                 role="button" rel="nofollow" target="_blank">Start tutorial</a>

              <a class="btn btn-outline-light btn-lg m-2" data-mdb-ripple-init href="https://mdbootstrap.com/docs/standard/"

                 target="_blank" role="button">Download MDB UI KIT</a>

            </div>

          </div>

        </div>

      </div>

​

      <!-- Single item -->

      <div class="carousel-item">

        <div class="mask" style="background-color: rgba(0, 0, 0, 0.3);">

          <div class="d-flex justify-content-center align-items-center h-100">

            <div class="text-white text-center">

              <h2>You can place here any content</h2>

            </div>

          </div>

        </div>

      </div>

​

      <!-- Single item -->

      <div class="carousel-item">

        <div class="mask" style="

                                 background: linear-gradient(

                                 45deg,

                                 rgba(29, 236, 197, 0.7),

                                 rgba(91, 14, 214, 0.7) 100%

                                 );

                                 ">

          <div class="d-flex justify-content-center align-items-center h-100" data-mdb-theme="dark">

            <div class="text-white text-center">

              <h2>And cover it with any mask</h2>

              <a class="btn btn-outline-light btn-lg m-2" data-mdb-ripple-init

                 href="https://mdbootstrap.com/docs/standard/content-styles/masks/" target="_blank" role="button">Learn

                about masks</a>

            </div>

          </div>

        </div>

      </div>

    </div>

    <!-- Inner -->

​

    <!-- Controls -->

    <a class="carousel-control-prev" href="#introCarousel" role="button" data-mdb-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="#introCarousel" role="button" data-mdb-slide="next">

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

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

    </a>

  </div>

  <!-- Carousel wrapper -->

</header>

<!--Main Navigation-->

​

<!--Main layout-->

<main class="mt-5">

  <div class="container">

    <!--Section: Content-->

    <section>

      <div class="row">

        <div class="col-md-6 gx-5 mb-4">

          <div class="bg-image hover-overlay shadow-2-strong" data-mdb-ripple-init data-mdb-ripple-color="light">

            <img src="https://mdbootstrap.com/img/new/slides/031.jpg" class="img-fluid" />

            <a href="#!">

              <div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>

            </a>

          </div>

        </div>

​

        <div class="col-md-6 gx-5 mb-4">

          <h4><strong>Facilis consequatur eligendi</strong></h4>

          <p class="text-muted">

            Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis consequatur

            eligendi quisquam doloremque vero ex debitis veritatis placeat unde animi laborum

            sapiente illo possimus, commodi dignissimos obcaecati illum maiores corporis.

          </p>

          <p><strong>Doloremque vero ex debitis veritatis?</strong></p>

          <p class="text-muted">

            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod itaque voluptate

            nesciunt laborum incidunt. Officia, quam consectetur. Earum eligendi aliquam illum

            alias, unde optio accusantium soluta, iusto molestiae adipisci et?

          </p>

        </div>

      </div>

    </section>

    <!--Section: Content-->

​

    <hr class="my-5" />

​

    <!--Section: Content-->

    <section class="text-center">

      <h4 class="mb-5"><strong>Facilis consequatur eligendi</strong></h4>

​

      <div class="row">

        <div class="col-lg-4 col-md-12 mb-4">

          <div class="card">

            <div class="bg-image hover-overlay" data-mdb-ripple-init data-mdb-ripple-color="light">

              <img src="https://mdbootstrap.com/img/new/standard/nature/184.jpg" class="img-fluid" />

              <a href="#!">

                <div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>

              </a>

            </div>

            <div class="card-body">

              <h5 class="card-title">Card title</h5>

              <p class="card-text">

                Some quick example text to build on the card title and make up the bulk of the

                card's content.

              </p>

              <a href="#!" class="btn btn-primary" data-mdb-ripple-init>Button</a>

            </div>

          </div>

        </div>

​

        <div class="col-lg-4 col-md-6 mb-4">

          <div class="card">

            <div class="bg-image hover-overlay" data-mdb-ripple-init data-mdb-ripple-color="light">

              <img src="https://mdbootstrap.com/img/new/standard/nature/023.jpg" class="img-fluid" />

              <a href="#!">

                <div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>

              </a>

            </div>

            <div class="card-body">

              <h5 class="card-title">Card title</h5>

              <p class="card-text">

                Some quick example text to build on the card title and make up the bulk of the

                card's content.

              </p>

              <a href="#!" class="btn btn-primary" data-mdb-ripple-init>Button</a>

            </div>

          </div>

        </div>

​

        <div class="col-lg-4 col-md-6 mb-4">

          <div class="card">

            <div class="bg-image hover-overlay" data-mdb-ripple-init data-mdb-ripple-color="light">

              <img src="https://mdbootstrap.com/img/new/standard/nature/111.jpg" class="img-fluid" />

              <a href="#!">

                <div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>

              </a>

            </div>

            <div class="card-body">

              <h5 class="card-title">Card title</h5>

              <p class="card-text">

                Some quick example text to build on the card title and make up the bulk of the

                card's content.

              </p>

              <a href="#!" class="btn btn-primary" data-mdb-ripple-init>Button</a>

            </div>

          </div>

        </div>

      </div>

    </section>

    <!--Section: Content-->

​

    <hr class="my-5" />

​

    <!--Section: Content-->

    <section class="mb-5">

      <h4 class="mb-5 text-center"><strong>Facilis consequatur eligendi</strong></h4>

​

      <div class="row d-flex justify-content-center">

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

          <form>

            <!-- 2 column grid layout with text inputs for the first and last names -->

            <div class="row mb-4">

              <div class="col">

                <div class="form-outline" data-mdb-input-init >

                  <input type="text" id="form3Example1" class="form-control" />

                  <label class="form-label" for="form3Example1">First name</label>

                </div>

              </div>

              <div class="col">

                <div class="form-outline" data-mdb-input-init >

                  <input type="text" id="form3Example2" class="form-control" />

                  <label class="form-label" for="form3Example2">Last name</label>

                </div>

              </div>

            </div>

​

            <!-- Email input -->

            <div class="form-outline mb-4" data-mdb-input-init >

              <input type="email" id="form3Example3" class="form-control" />

              <label class="form-label" for="form3Example3">Email address</label>

            </div>

​

            <!-- Password input -->

            <div class="form-outline mb-4" data-mdb-input-init >

              <input type="password" id="form3Example4" class="form-control" />

              <label class="form-label" for="form3Example4">Password</label>

            </div>

​

            <!-- Checkbox -->

            <div class="form-check d-flex justify-content-center mb-4">

              <input class="form-check-input me-2" type="checkbox" value="" id="form2Example3" checked />

              <label class="form-check-label" for="form2Example3">

                Subscribe to our newsletter

              </label>

            </div>

​

            <!-- Submit button -->

            <button type="submit" class="btn btn-primary btn-block mb-4" data-mdb-ripple-init>

              Sign up

            </button>

​

            <!-- Register buttons -->

            <div class="text-center">

              <p>or sign up with:</p>

              <button type="button" class="btn btn-primary btn-floating mx-1" data-mdb-ripple-init>

                <i class="fab fa-facebook-f"></i>

              </button>

​

              <button type="button" class="btn btn-primary btn-floating mx-1" data-mdb-ripple-init>

                <i class="fab fa-google"></i>

              </button>

​

              <button type="button" class="btn btn-primary btn-floating mx-1" data-mdb-ripple-init>

                <i class="fab fa-twitter"></i>

              </button>

​

              <button type="button" class="btn btn-primary btn-floating mx-1" data-mdb-ripple-init>

                <i class="fab fa-github"></i>

              </button>

            </div>

          </form>

        </div>

      </div>

    </section>

    <!--Section: Content-->

  </div>

</main>

<!--Main layout-->

​

<!--Footer-->

<footer class="bg-light text-lg-start">

  <div class="py-4 text-center">

    <a role="button" class="btn btn-primary btn-lg m-2" data-mdb-ripple-init

       href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow" target="_blank">

      Learn Bootstrap 5

    </a>

    <a role="button" class="btn btn-primary btn-lg m-2" data-mdb-ripple-init href="https://mdbootstrap.com/docs/standard/" target="_blank">

      Download MDB UI KIT

    </a>

  </div>

​

  <hr class="m-0" />

​

  <div class="text-center py-4 align-items-center">

    <p>Follow MDB on social media</p>

    <a href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" class="btn btn-primary m-1" role="button" data-mdb-ripple-init

       rel="nofollow" target="_blank">

      <i class="fab fa-youtube"></i>

    </a>

    <a href="https://www.facebook.com/mdbootstrap" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init

       target="_blank">

      <i class="fab fa-facebook-f"></i>

    </a>

    <a href="https://twitter.com/MDBootstrap" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init

       target="_blank">

      <i class="fab fa-twitter"></i>

    </a>

    <a href="https://github.com/mdbootstrap/mdb-ui-kit" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init

       target="_blank">

      <i class="fab fa-github"></i>

    </a>

  </div>

​

  <!-- Copyright -->

  <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">

    © 2020 Copyright:

    <a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>

  </div>

  <!-- Copyright -->

</footer>

<!--Footer-->