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