Some great placeholder content for the first featurette here. Imagine some exciting prose here.
Oh yeah, it’s that good.
See for yourself.
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.
And lastly, this one.
Checkmate.
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.
<div class="carousel slide" data-bs-interval="5000" data-bs-ride="carousel" data-bs-touch="false" id="carousel-749327098">
<div class="carousel-indicators">
<button type="button"
data-bs-target="#carousel-749327098"
data-bs-slide-to="0"
aria-label="Slide @slide_number"
class="active" aria-current="true"></button>
<button type="button"
data-bs-target="#carousel-749327098"
data-bs-slide-to="1"
aria-label="Slide @slide_number"
></button>
<button type="button"
data-bs-target="#carousel-749327098"
data-bs-slide-to="2"
aria-label="Slide @slide_number"
></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img height="100%" src="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iYmQtcGxhY2Vob2xkZXItaW1nIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGFyaWEtaGlkZGVuPSJ0cnVlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSIgZm9jdXNhYmxlPSJmYWxzZSI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iIzc3NyI+PC9yZWN0Pjwvc3ZnPgo=" width="100%" />
<div class="carousel-caption">
<h1 class="text-start">Example headline.</h1>
<p class="text-start">Some representative placeholder content for the first slide of the carousel.</p>
<p class="text-start">
<a class="btn-primary btn-lg btn" href="#anchor" role="button">Sign up today</a>
</p></div>
</div>
<div class="carousel-item">
<img height="100%" src="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iYmQtcGxhY2Vob2xkZXItaW1nIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGFyaWEtaGlkZGVuPSJ0cnVlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSIgZm9jdXNhYmxlPSJmYWxzZSI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iIzc3NyI+PC9yZWN0Pjwvc3ZnPgo=" width="100%" />
<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-primary btn-lg btn" href="https://example.com" role="button">Learn more</a>
</p></div>
</div>
<div class="carousel-item">
<img height="100%" src="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iYmQtcGxhY2Vob2xkZXItaW1nIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGFyaWEtaGlkZGVuPSJ0cnVlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSIgZm9jdXNhYmxlPSJmYWxzZSI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iIzc3NyI+PC9yZWN0Pjwvc3ZnPgo=" width="100%" />
<div class="carousel-caption">
<h1 class="text-end">One more for good measure.</h1>
<p class="text-end">Some representative placeholder content for the third slide of this carousel.</p>
<p class="text-end">
<a class="btn-primary btn-lg btn" href="https://example.com" role="button">Browse gallery</a>
</p></div>
</div>
</div>
<button class="carousel-control-prev"
type="button"
data-bs-target="#carousel-749327098"
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="#carousel-749327098"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="container">
<div class="marketing row">
<div class=" col-lg-4 ">
<img class="rounded-circle" height="140" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="140" />
<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-secondary btn" href="https://example.com" role="button">View details »</a>
</p>
</div>
<div class=" col-lg-4 ">
<img class="rounded-circle" height="140" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="140" />
<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-secondary btn" href="https://example.com" role="button">View details »</a>
</p>
</div>
<div class=" col-lg-4 ">
<img class="rounded-circle" height="140" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="140" />
<h2 class="fw-normal">Heading</h2>
<p>And lastly this, the third column of representative placeholder content.</p>
<p>
<a class="btn-secondary btn" href="https://example.com" role="button">View details »</a>
</p>
</div>
</div>
</div>
<div class="container marketing">
<hr class="featurette-divider" />
<div class="row featurette">
<div class="col-md-7">
<h2 class="fw-normal lh-1 featurette-heading">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">
<img class="mx-auto featurette-image img-fluid" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22500%22%20height%3D%22500%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20500%20500%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16d9b9aa225%20text%20%7B%20fill%3A%23AAAAAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A25pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16d9b9aa225%22%3E%3Crect%20width%3D%22500%22%20height%3D%22500%22%20fill%3D%22%23EEEEEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22185.25%22%20y%3D%22261.4%22%3E500x500%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" /></div></div>
<hr class="featurette-divider" />
<div class="row featurette">
<div class="col-md-7 order-md-2">
<h2 class="fw-normal lh-1 featurette-heading">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">
<img class="mx-auto featurette-image img-fluid" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22500%22%20height%3D%22500%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20500%20500%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16d9b9aa225%20text%20%7B%20fill%3A%23AAAAAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A25pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16d9b9aa225%22%3E%3Crect%20width%3D%22500%22%20height%3D%22500%22%20fill%3D%22%23EEEEEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22185.25%22%20y%3D%22261.4%22%3E500x500%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" /></div></div>
<hr class="featurette-divider" />
<div class="row featurette">
<div class="col-md-7">
<h2 class="fw-normal lh-1 featurette-heading">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">
<img class="mx-auto featurette-image img-fluid" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22500%22%20height%3D%22500%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20500%20500%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16d9b9aa225%20text%20%7B%20fill%3A%23AAAAAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A25pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16d9b9aa225%22%3E%3Crect%20width%3D%22500%22%20height%3D%22500%22%20fill%3D%22%23EEEEEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22185.25%22%20y%3D%22261.4%22%3E500x500%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" /></div></div></div>
