<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<title>Boostrap 5.0</title>
</head>
<body>
<main class="container">
<h1>Bootstrap 5.0 is released!</h1>
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button"
aria-controls="offcanvasExample">
About this Pen
</a>
<!--Accordian -->
<div class="row pt-5">
<div class="col">
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Star Wars Movie Ranking
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<ol>
<li>Empire Strikes Back</li>
<li>A New Hope</li>
<li>Force Awakens</li>
<li>Solo</li>
<li>Rogue One</li>
<li>Return of the Jedi</li>
<li>Revenge of the Sith</li>
<li>Attack of Clones</li>
<li>The Last Jedi</li>
<li>Phantom Menance</li>
<li>The Rise of Skywalker</li>
</ol>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Favorite Star Wars Posters
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card ">
<div class="card-body">
<h5 class="card-title">Solo</h5>
</div>
<img
src="https://lumiere-a.akamaihd.net/v1/images/solo-theatrical-poster-1000_27861ab7.jpeg?region=0%2C0%2C1000%2C1481"
class="card-img-bottom" alt="...">
</div>
</div>
<div class="col">
<div class="card ">
<div class="card-body">
<h5 class="card-title">New Hope</h5>
</div>
<img
src="https://lumiere-a.akamaihd.net/v1/images/Star-Wars-New-Hope-IV-Poster_c217085b.jpeg?region=49%2C43%2C580%2C914"
class="card-img-bottom" alt="...">
</div>
</div>
<div class="col">
<div class="card ">
<div class="card-body">
<h5 class="card-title">The Force Awakens</h5>
</div>
<img
src="https://lumiere-a.akamaihd.net/v1/images/star-wars-the-rise-of-skywalker-theatrical-poster-1000_ebc74357.jpeg?region=0%2C0%2C891%2C1372"
class="card-img-bottom" alt="...">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!--Off Canvas Side Bar Menu-->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Boostrap 5.0 is released!</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body text-white bg-dark">
<p>
In Celebration of the release of Boostrap 5.0. Let's show off the new off canvas element and the accoridan!
</p>
<p>
Off-Canvas elements allow you to make slide-in side bars for creative menu navigation
</p>
<p>
The accoridan is very flexible allowing for auto collapsing with writing javascript.
</p>
<img class="img-fluid mt-2"
src="https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/themes/2147524059/settings_images/adstJKZsSfmuvEUnCXAu_CF_Logo_W.png">
</div>
</div>
<!--Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous">
</script>
</body>
</html>body,
html {
min-height: 100%;
}
main {
padding-top: 5rem;
}
ol {
max-width: 350px;
counter-reset: my-counter;
list-style: none;
padding-left: 40px;
}
ol li {
margin: 0 0 1rem 2rem;
counter-increment: my-counter;
position: relative;
}
ol li::before {
content: counter(my-counter);
color: #ff993b;
font-size: 1.5rem;
font-weight: bold;
position: absolute;
--size: 32px;
left: calc(-1 * var(--size) - 10px);
line-height: var(--size);
width: var(--size);
height: var(--size);
top: 0;
background: black;
border-radius: 50%;
text-align: center;
box-shadow: 1px 1px 0 #999;
}
.poster {
border: 1px solid black;
border-radius: 5%;
box-shadow: 10px 10px 15px #212121;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.