diff options
Diffstat (limited to 'site/content/docs/5.2/examples/carousel/index.html')
| -rw-r--r-- | site/content/docs/5.2/examples/carousel/index.html | 166 |
1 files changed, 166 insertions, 0 deletions
diff --git a/site/content/docs/5.2/examples/carousel/index.html b/site/content/docs/5.2/examples/carousel/index.html new file mode 100644 index 0000000..67c0dd5 --- /dev/null +++ b/site/content/docs/5.2/examples/carousel/index.html @@ -0,0 +1,166 @@ +--- +layout: examples +title: Carousel Template +extra_css: + - "carousel.css" +--- + +<header> + <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> + <div class="container-fluid"> + <a class="navbar-brand" href="#">Carousel</a> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + <div class="collapse navbar-collapse" id="navbarCollapse"> + <ul class="navbar-nav me-auto mb-2 mb-md-0"> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Link</a> + </li> + <li class="nav-item"> + <a class="nav-link disabled">Disabled</a> + </li> + </ul> + <form class="d-flex" role="search"> + <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> + <button class="btn btn-outline-success" type="submit">Search</button> + </form> + </div> + </div> + </nav> +</header> + +<main> + + <div id="myCarousel" class="carousel slide" data-bs-ride="carousel"> + <div class="carousel-indicators"> + <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> + <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button> + <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button> + </div> + <div class="carousel-inner"> + <div class="carousel-item active"> + {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}} + <div class="container"> + <div class="carousel-caption text-start"> + <h1>Example headline.</h1> + <p>Some representative placeholder content for the first slide of the carousel.</p> + <p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p> + </div> + </div> + </div> + <div class="carousel-item"> + {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}} + <div class="container"> + <div class="carousel-caption"> + <h1>Another example headline.</h1> + <p>Some representative placeholder content for the second slide of the carousel.</p> + <p><a class="btn btn-lg btn-primary" href="#">Learn more</a></p> + </div> + </div> + </div> + <div class="carousel-item"> + {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}} + <div class="container"> + <div class="carousel-caption text-end"> + <h1>One more for good measure.</h1> + <p>Some representative placeholder content for the third slide of this carousel.</p> + <p><a class="btn btn-lg btn-primary" href="#">Browse gallery</a></p> + </div> + </div> + </div> + </div> + <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev"> + <span class="carousel-control-prev-icon" aria-hidden="true"></span> + <span class="visually-hidden">Previous</span> + </button> + <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next"> + <span class="carousel-control-next-icon" aria-hidden="true"></span> + <span class="visually-hidden">Next</span> + </button> + </div> + + + <!-- Marketing messaging and featurettes + ================================================== --> + <!-- Wrap the rest of the page in another container to center all the content. --> + + <div class="container marketing"> + + <!-- Three columns of text below the carousel --> + <div class="row"> + <div class="col-lg-4"> + {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} + <h2 class="fw-normal">Heading</h2> + <p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p> + <p><a class="btn btn-secondary" href="#">View details »</a></p> + </div><!-- /.col-lg-4 --> + <div class="col-lg-4"> + {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} + <h2 class="fw-normal">Heading</h2> + <p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p> + <p><a class="btn btn-secondary" href="#">View details »</a></p> + </div><!-- /.col-lg-4 --> + <div class="col-lg-4"> + {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} + <h2 class="fw-normal">Heading</h2> + <p>And lastly this, the third column of representative placeholder content.</p> + <p><a class="btn btn-secondary" href="#">View details »</a></p> + </div><!-- /.col-lg-4 --> + </div><!-- /.row --> + + + <!-- START THE FEATURETTES --> + + <hr class="featurette-divider"> + + <div class="row featurette"> + <div class="col-md-7"> + <h2 class="featurette-heading fw-normal lh-1">First featurette heading. <span class="text-muted">It’ll blow your mind.</span></h2> + <p class="lead">Some great placeholder content for the first featurette here. Imagine some exciting prose here.</p> + </div> + <div class="col-md-5"> + {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} + </div> + </div> + + <hr class="featurette-divider"> + + <div class="row featurette"> + <div class="col-md-7 order-md-2"> + <h2 class="featurette-heading fw-normal lh-1">Oh yeah, it’s that good. <span class="text-muted">See for yourself.</span></h2> + <p class="lead">Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.</p> + </div> + <div class="col-md-5 order-md-1"> + {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} + </div> + </div> + + <hr class="featurette-divider"> + + <div class="row featurette"> + <div class="col-md-7"> + <h2 class="featurette-heading fw-normal lh-1">And lastly, this one. <span class="text-muted">Checkmate.</span></h2> + <p class="lead">And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.</p> + </div> + <div class="col-md-5"> + {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} + </div> + </div> + + <hr class="featurette-divider"> + + <!-- /END THE FEATURETTES --> + + </div><!-- /.container --> + + + <!-- FOOTER --> + <footer class="container"> + <p class="float-end"><a href="#">Back to top</a></p> + <p>© 2017–{{< year >}} Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p> + </footer> +</main> |