<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>Material Design for Bootstrap</title>
    <!-- MDB icon -->
    <link rel="icon" href="../../img/mdb-favicon.ico" type="image/x-icon" />
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
    <!-- Google Fonts Roboto -->
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
    />
    <!-- MDB -->
    <link rel="stylesheet" href="../../css/mdb.min.css" />
    <!-- PRISM -->
    <link rel="stylesheet" href="../../dev/css/new-prism.css" />
    <!-- Custom styles -->
    <style></style>
  </head>

  <body>
    <div class="container" style="margin-top: 3rem; margin-bottom: 3rem;">
      <div id="carouselExampleSlidesOnly" class="carousel slide" data-mdb-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item">
            <svg
              class="bd-placeholder-img bd-placeholder-img-lg d-block w-100"
              width="800"
              height="400"
              xmlns="http://www.w3.org/2000/svg"
              aria-label="Placeholder: First slide"
              preserveAspectRatio="xMidYMid slice"
              role="img"
              focusable="false"
            >
              <title>Placeholder</title>
              <rect width="100%" height="100%" fill="#777"></rect>
              <text x="50%" y="50%" fill="#555" dy=".3em">First slide</text>
            </svg>
          </div>
          <div class="carousel-item active">
            <svg
              class="bd-placeholder-img bd-placeholder-img-lg d-block w-100"
              width="800"
              height="400"
              xmlns="http://www.w3.org/2000/svg"
              aria-label="Placeholder: Second slide"
              preserveAspectRatio="xMidYMid slice"
              role="img"
              focusable="false"
            >
              <title>Placeholder</title>
              <rect width="100%" height="100%" fill="#666"></rect>
              <text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text>
            </svg>
          </div>
          <div class="carousel-item">
            <svg
              class="bd-placeholder-img bd-placeholder-img-lg d-block w-100"
              width="800"
              height="400"
              xmlns="http://www.w3.org/2000/svg"
              aria-label="Placeholder: Third slide"
              preserveAspectRatio="xMidYMid slice"
              role="img"
              focusable="false"
            >
              <title>Placeholder</title>
              <rect width="100%" height="100%" fill="#555"></rect>
              <text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text>
            </svg>
          </div>
        </div>
      </div>

      <br />

      <div id="carouselExampleControls" class="carousel slide" data-mdb-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item">
            <svg
              class="bd-placeholder-img bd-placeholder-img-lg d-block w-100"
              width="800"
              height="400"
              xmlns="http://www.w3.org/2000/svg"
              aria-label="Placeholder: First slide"
              preserveAspectRatio="xMidYMid slice"
              role="img"
              focusable="false"
            >
              <title>Placeholder</title>
              <rect width="100%" height="100%" fill="#777"></rect>
              <text x="50%" y="50%" fill="#555" dy=".3em">First slide</text>
            </svg>
          </div>
          <div class="carousel-item active">
            <svg
              class="bd-placeholder-img bd-placeholder-img-lg d-block w-100"
              width="800"
              height="400"
              xmlns="http://www.w3.org/2000/svg"
              aria-label="Placeholder: Second slide"
              preserveAspectRatio="xMidYMid slice"
              role="img"
              focusable="false"
            >
              <title>Placeholder</title>
              <rect width="100%" height="100%" fill="#666"></rect>
              <text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text>
            </svg>
          </div>
          <div class="carousel-item">
            <svg
              class="bd-placeholder-img bd-placeholder-img-lg d-block w-100"
              width="800"
              height="400"
              xmlns="http://www.w3.org/2000/svg"
              aria-label="Placeholder: Third slide"
              preserveAspectRatio="xMidYMid slice"
              role="img"
              focusable="false"
            >
              <title>Placeholder</title>
              <rect width="100%" height="100%" fill="#555"></rect>
              <text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text>
            </svg>
          </div>
        </div>
        <a
          class="carousel-control-prev"
          href="#carouselExampleControls"
          role="button"
          data-mdb-slide="prev"
        >
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </a>
        <a
          class="carousel-control-next"
          href="#carouselExampleControls"
          role="button"
          data-mdb-slide="next"
        >
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </a>
      </div>

      <br />

      <div id="carouselExampleIndicators" class="carousel slide" data-mdb-ride="carousel">
        <ol class="carousel-indicators">
          <li data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="0" class=""></li>
          <li data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="1" class=""></li>
          <li
            data-mdb-target="#carouselExampleIndicators"
            data-mdb-slide-to="2"
            class="active"
          ></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item">
            <svg
              class="bd-placeholder-img bd-placeholder-img-lg d-block w-100"
              width="800"
              height="400"
              xmlns="http://www.w3.org/2000/svg"
              aria-label="Placeholder: First slide"
              preserveAspectRatio="xMidYMid slice"
              role="img"
              focusable="false"
            >
              <title>Placeholder</title>
              <rect width="100%" height="100%" fill="#777"></rect>
              <text x="50%" y="50%" fill="#555" dy=".3em">First slide</text>
            </svg>
          </div>
          <div class="carousel-item">
            <svg
              class="bd-placeholder-img bd-placeholder-img-lg d-block w-100"
              width="800"
              height="400"
              xmlns="http://www.w3.org/2000/svg"
              aria-label="Placeholder: Second slide"
              preserveAspectRatio="xMidYMid slice"
              role="img"
              focusable="false"
            >
              <title>Placeholder</title>
              <rect width="100%" height="100%" fill="#666"></rect>
              <text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text>
            </svg>
          </div>
          <div class="carousel-item active">
            <svg
              class="bd-placeholder-img bd-placeholder-img-lg d-block w-100"
              width="800"
              height="400"
              xmlns="http://www.w3.org/2000/svg"
              aria-label="Placeholder: Third slide"
              preserveAspectRatio="xMidYMid slice"
              role="img"
              focusable="false"
            >
              <title>Placeholder</title>
              <rect width="100%" height="100%" fill="#555"></rect>
              <text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text>
            </svg>
          </div>
        </div>
        <a
          class="carousel-control-prev"
          href="#carouselExampleIndicators"
          role="button"
          data-mdb-slide="prev"
        >
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </a>
        <a
          class="carousel-control-next"
          href="#carouselExampleIndicators"
          role="button"
          data-mdb-slide="next"
        >
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </a>
      </div>

      <br />

      <div id="carouselExampleCaptions" class="carousel slide" data-mdb-ride="carousel">
        <ol class="carousel-indicators">
          <li data-mdb-target="#carouselExampleCaptions" data-mdb-slide-to="0" class=""></li>
          <li data-mdb-target="#carouselExampleCaptions" data-mdb-slide-to="1" class=""></li>
          <li data-mdb-target="#carouselExampleCaptions" data-mdb-slide-to="2" class="active"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item">
            <svg
              class="bd-placeholder-img bd-placeholder-img-lg d-block w-100"
              width="800"
              height="400"
              xmlns="http://www.w3.org/2000/svg"
              aria-label="Placeholder: First slide"
              preserveAspectRatio="xMidYMid slice"
              role="img"
              focusable="false"
            >
              <title>Placeholder</title>
              <rect width="100%" height="100%" fill="#777"></rect>
              <text x="50%" y="50%" fill="#555" dy=".3em">First slide</text>
            </svg>

            <div class="carousel-caption d-none d-md-block">
              <h5>First slide label</h5>
              <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
            </div>
          </div>
          <div class="carousel-item">
            <svg
              class="bd-placeholder-img bd-placeholder-img-lg d-block w-100"
              width="800"
              height="400"
              xmlns="http://www.w3.org/2000/svg"
              aria-label="Placeholder: Second slide"
              preserveAspectRatio="xMidYMid slice"
              role="img"
              focusable="false"
            >
              <title>Placeholder</title>
              <rect width="100%" height="100%" fill="#666"></rect>
              <text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text>
            </svg>

            <div class="carousel-caption d-none d-md-block">
              <h5>Second slide label</h5>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
          </div>
          <div class="carousel-item active">
            <svg
              class="bd-placeholder-img bd-placeholder-img-lg d-block w-100"
              width="800"
              height="400"
              xmlns="http://www.w3.org/2000/svg"
              aria-label="Placeholder: Third slide"
              preserveAspectRatio="xMidYMid slice"
              role="img"
              focusable="false"
            >
              <title>Placeholder</title>
              <rect width="100%" height="100%" fill="#555"></rect>
              <text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text>
            </svg>

            <div class="carousel-caption d-none d-md-block">
              <h5>Third slide label</h5>
              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
            </div>
          </div>
        </div>
        <a
          class="carousel-control-prev"
          href="#carouselExampleCaptions"
          role="button"
          data-mdb-slide="prev"
        >
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </a>
        <a
          class="carousel-control-next"
          href="#carouselExampleCaptions"
          role="button"
          data-mdb-slide="next"
        >
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </a>
      </div>

      <br />

      <div id="carouselExampleFade" class="carousel slide carousel-fade" data-mdb-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <svg
              class="bd-placeholder-img bd-placeholder-img-lg d-block w-100"
              width="800"
              height="400"
              xmlns="http://www.w3.org/2000/svg"
              aria-label="Placeholder: First slide"
              preserveAspectRatio="xMidYMid slice"
              role="img"
              focusable="false"
            >
              <title>Placeholder</title>
              <rect width="100%" height="100%" fill="#777"></rect>
              <text x="50%" y="50%" fill="#555" dy=".3em">First slide</text>
            </svg>
          </div>
          <div class="carousel-item">
            <svg
              class="bd-placeholder-img bd-placeholder-img-lg d-block w-100"
              width="800"
              height="400"
              xmlns="http://www.w3.org/2000/svg"
              aria-label="Placeholder: Second slide"
              preserveAspectRatio="xMidYMid slice"
              role="img"
              focusable="false"
            >
              <title>Placeholder</title>
              <rect width="100%" height="100%" fill="#666"></rect>
              <text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text>
            </svg>
          </div>
          <div class="carousel-item">
            <svg
              class="bd-placeholder-img bd-placeholder-img-lg d-block w-100"
              width="800"
              height="400"
              xmlns="http://www.w3.org/2000/svg"
              aria-label="Placeholder: Third slide"
              preserveAspectRatio="xMidYMid slice"
              role="img"
              focusable="false"
            >
              <title>Placeholder</title>
              <rect width="100%" height="100%" fill="#555"></rect>
              <text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text>
            </svg>
          </div>
        </div>
        <a
          class="carousel-control-prev"
          href="#carouselExampleFade"
          role="button"
          data-mdb-slide="prev"
        >
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </a>
        <a
          class="carousel-control-next"
          href="#carouselExampleFade"
          role="button"
          data-mdb-slide="next"
        >
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </a>
      </div>

      <br />

      <div id="carouselExampleInterval" class="carousel slide" data-mdb-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item" data-interval="10000">
            <svg
              class="bd-placeholder-img bd-placeholder-img-lg d-block w-100"
              width="800"
              height="400"
              xmlns="http://www.w3.org/2000/svg"
              aria-label="Placeholder: First slide"
              preserveAspectRatio="xMidYMid slice"
              role="img"
              focusable="false"
            >
              <title>Placeholder</title>
              <rect width="100%" height="100%" fill="#777"></rect>
              <text x="50%" y="50%" fill="#555" dy=".3em">First slide</text>
            </svg>
          </div>
          <div class="carousel-item" data-interval="2000">
            <svg
              class="bd-placeholder-img bd-placeholder-img-lg d-block w-100"
              width="800"
              height="400"
              xmlns="http://www.w3.org/2000/svg"
              aria-label="Placeholder: Second slide"
              preserveAspectRatio="xMidYMid slice"
              role="img"
              focusable="false"
            >
              <title>Placeholder</title>
              <rect width="100%" height="100%" fill="#666"></rect>
              <text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text>
            </svg>
          </div>
          <div class="carousel-item active">
            <svg
              class="bd-placeholder-img bd-placeholder-img-lg d-block w-100"
              width="800"
              height="400"
              xmlns="http://www.w3.org/2000/svg"
              aria-label="Placeholder: Third slide"
              preserveAspectRatio="xMidYMid slice"
              role="img"
              focusable="false"
            >
              <title>Placeholder</title>
              <rect width="100%" height="100%" fill="#555"></rect>
              <text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text>
            </svg>
          </div>
        </div>
        <a
          class="carousel-control-prev"
          href="#carouselExampleInterval"
          role="button"
          data-mdb-slide="prev"
        >
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </a>
        <a
          class="carousel-control-next"
          href="#carouselExampleInterval"
          role="button"
          data-mdb-slide="next"
        >
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </a>
      </div>

      <br />
    </div>

    <!-- MDB -->
    <script type="text/javascript" src="../../js/mdb.min.js"></script>
    <!-- PRISM -->
    <script type="text/javascript" src="../../dev/js/new-prism.js"></script>
    <!-- MDB SNIPPET -->
    <script type="text/javascript" src="../../dev/js/dist/mdbsnippet.min.js"></script>
    <!-- Custom scripts -->
    <script type="text/javascript"></script>
  </body>
</html>