diff options
author | Mario <mario@mariovavti.com> | 2023-01-20 11:05:15 +0000 |
---|---|---|
committer | Mario <mario@mariovavti.com> | 2023-01-20 11:05:15 +0000 |
commit | 9dc949b62c6b5e3c8872211f71b11714d9d22b22 (patch) | |
tree | 38c06e7a128742e219eb74d6adb035f2f106918a /vendor/twbs/bootstrap/site/content/docs/5.3/examples/carousel | |
parent | 40394b94d7c8a8bf1f61f5482195164fff434b90 (diff) | |
download | volse-hubzilla-9dc949b62c6b5e3c8872211f71b11714d9d22b22.tar.gz volse-hubzilla-9dc949b62c6b5e3c8872211f71b11714d9d22b22.tar.bz2 volse-hubzilla-9dc949b62c6b5e3c8872211f71b11714d9d22b22.zip |
native dark theme initial checkin
Diffstat (limited to 'vendor/twbs/bootstrap/site/content/docs/5.3/examples/carousel')
3 files changed, 322 insertions, 0 deletions
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/carousel/carousel.css b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/carousel/carousel.css new file mode 100644 index 000000000..0bdf9768d --- /dev/null +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/carousel/carousel.css @@ -0,0 +1,82 @@ +/* GLOBAL STYLES +-------------------------------------------------- */ +/* Padding below the footer and lighter body text */ + +body { + padding-top: 3rem; + padding-bottom: 3rem; + color: #5a5a5a; +} + + +/* CUSTOMIZE THE CAROUSEL +-------------------------------------------------- */ + +/* Carousel base class */ +.carousel { + margin-bottom: 4rem; +} +/* Since positioning the image, we need to help out the caption */ +.carousel-caption { + bottom: 3rem; + z-index: 10; +} + +/* Declare heights because of positioning of img element */ +.carousel-item { + height: 32rem; +} + + +/* MARKETING CONTENT +-------------------------------------------------- */ + +/* Center align the text within the three columns below the carousel */ +.marketing .col-lg-4 { + margin-bottom: 1.5rem; + text-align: center; +} +/* rtl:begin:ignore */ +.marketing .col-lg-4 p { + margin-right: .75rem; + margin-left: .75rem; +} +/* rtl:end:ignore */ + + +/* Featurettes +------------------------- */ + +.featurette-divider { + margin: 5rem 0; /* Space out the Bootstrap <hr> more */ +} + +/* Thin out the marketing headings */ +/* rtl:begin:remove */ +.featurette-heading { + letter-spacing: -.05rem; +} + +/* rtl:end:remove */ + +/* RESPONSIVE CSS +-------------------------------------------------- */ + +@media (min-width: 40em) { + /* Bump up size of carousel content */ + .carousel-caption p { + margin-bottom: 1.25rem; + font-size: 1.25rem; + line-height: 1.4; + } + + .featurette-heading { + font-size: 50px; + } +} + +@media (min-width: 62em) { + .featurette-heading { + margin-top: 7rem; + } +} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/carousel/carousel.rtl.css b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/carousel/carousel.rtl.css new file mode 100644 index 000000000..d20a8111a --- /dev/null +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/carousel/carousel.rtl.css @@ -0,0 +1,74 @@ +/* GLOBAL STYLES +-------------------------------------------------- */ +/* Padding below the footer and lighter body text */ + +body { + padding-top: 3rem; + padding-bottom: 3rem; + color: #5a5a5a; +} + + +/* CUSTOMIZE THE CAROUSEL +-------------------------------------------------- */ + +/* Carousel base class */ +.carousel { + margin-bottom: 4rem; +} +/* Since positioning the image, we need to help out the caption */ +.carousel-caption { + bottom: 3rem; + z-index: 10; +} + +/* Declare heights because of positioning of img element */ +.carousel-item { + height: 32rem; +} + + +/* MARKETING CONTENT +-------------------------------------------------- */ + +/* Center align the text within the three columns below the carousel */ +.marketing .col-lg-4 { + margin-bottom: 1.5rem; + text-align: center; +} +.marketing .col-lg-4 p { + margin-right: .75rem; + margin-left: .75rem; +} + + +/* Featurettes +------------------------- */ + +.featurette-divider { + margin: 5rem 0; /* Space out the Bootstrap <hr> more */ +} + +/* Thin out the marketing headings */ + +/* RESPONSIVE CSS +-------------------------------------------------- */ + +@media (min-width: 40em) { + /* Bump up size of carousel content */ + .carousel-caption p { + margin-bottom: 1.25rem; + font-size: 1.25rem; + line-height: 1.4; + } + + .featurette-heading { + font-size: 50px; + } +} + +@media (min-width: 62em) { + .featurette-heading { + margin-top: 7rem; + } +} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/carousel/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/carousel/index.html new file mode 100644 index 000000000..67c0dd529 --- /dev/null +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/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> |