487 lines
18 KiB
HTML
487 lines
18 KiB
HTML
|
<!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>
|