Poisonous Directory (Bootstrap)

<!-- PLEASE SEE HERE FOR MY CODE RULES: https://toyhou.se/12931952.bonus-content/17036656.-06-code-rules --

Version: 1.0

Default Colours
-Important White: #FFFFFF
-Important Black: #000000
-Default Font: 'comic sans ms'

Scroll To The Bottom for every single "Find & Replace" Variable! (Feel free to move to the top when you turn this into a personal template, I just keep it at the bottom for organisation.)

Thank you for reading!
Crispin

-->

<!------------------------------- START ACTUAL CODE -------------------------------->
<div class="col-lg-10 col-12 p-0 mx-auto border-0 rounded-0" style="font-size:1rem; font-family:'comic sans ms';">

  <!------------------------------- START HEADING -------------------------------->
  <div class="p-0" style="border:#000000 8px solid;">
    <div class="card rounded-0" style="background:url([LINKHEADERIMAGE]); background-position:center; background-size:cover; border:none;"><p class="justify-content-center display-4 m-1 p-3" style="color:#FFFFFF; background:rgba(0,0,0,0.7);">Directory</p></div>
  </div>
  <!------------------------------- END HEADING -------------------------------->

  <!------------------------------- START MIDDLE SECTION -------------------------------->
  <div class="row">

    <!------------------------------- START LEFT BOX -------------------------------->
    <div class="col-lg-8 col-12 p-3 rounded-0">
      <div class="bg-dark p-3 rounded-0" style="height:500px; overflow:auto; border:#000000 8px solid;">

        <!-- Start Warnings -->
        <p class="text-primary display-3">Warnings</p><hr class="mt-1 mb-3">
        <a class="btn btn-primary rounded-0" href="[LINKTAG]">[TEXTTAG]</a>
        <a class="btn btn-primary rounded-0" href="[LINKTAG]">[TEXTTAG]</a>
        <a class="btn btn-primary rounded-0" href="[LINKTAG]">[TEXTTAG]</a>
        <a class="btn btn-primary rounded-0" href="[LINKTAG]">[TEXTTAG]</a>
        <!-- End Warnings -->

        <!-- Start Plot Synopsis -->
        <p class="text-primary display-3 mt-3">Overview</p><hr class="mt-1 mb-3">
        <p>[TEXTBASICOVERVIEW]</p>
        <!-- End Plot Synopsis -->

        <!-- Start Plot Indepth -->
        <span class="collapsed btn btn-primary px-5 my-2 rounded-0"><a data-toggle="collapse" style="color:#FFFFFF; font-size:1rem;" href="#tags1" aria-expanded="true">View Full Overview</a></span>

        <div class="collapse" id="tags1">
          <p class="text-primary display-4 mt-3">Season 1</p><hr class="mt-1 mb-3">
          <p>[TEXTSEASONOVERVIEW]</p>
        </div>
        <!-- End Plot Indepth -->

        <!-- Start Characters -->
        <p class="text-primary display-3 mt-3">Characters</p><hr class="mt-1 mb-3">
        <span class="collapsed btn btn-primary px-5 my-2 rounded-0"><a data-toggle="collapse" style="color:#FFFFFF; font-size:1rem;" href="#characters" aria-expanded="true">View Characters</a></span>

        <div class="collapse" id="characters">

          <!-- START MATEY -->
          <div class="row">
            <div class="col-12 col-sm-3 col-md-4 col-xl-3 mb-2 mb-sm-0 order-sm-1">
              <div class="card bg-transparent border-0" style="max-width:150px; margin-left:auto; margin-right:auto;">
                <a data-toggle="tooltip" href="[LINKCHARACTER]"><img src="[LINKIMAGECHARACTER]"></a>
              </div>
            </div>
            <div class="col-12 col-sm-9 col-md-8 col-xl-9 order-2 order-1 order-sm-2">
              <a href="[LINKCHARACTER]" style="font-size:1.2rem;">[TEXTCHARACTERNAME]</a><hr class="mt-0 mb-2">
              <p>[TEXTSHORTDESC]</p>
              <p class="text-dark">-</p>
            </div>
          </div>
          <!-- END MATEY -->

        </div>
        <!-- End Characters -->

      </div>
    </div>
    <!------------------------------- END LEFT BOX -------------------------------->

    <!------------------------------- START RIGHT BOX -------------------------------->
    <div class="col-lg-4 col-12 p-3 rounded-0">
      <div class="p-0 rounded-0" style="height:500px; border:#000000 8px solid;">

        <!-- Start Carousel -->
        <div id="myCarousel" class="carousel slide" data-ride="carousel">

          <!-- Start Amount Of Carousel Images -->
          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
          </ol>
          <!-- End Amount Of Carousel Images -->

          <!-- Start Carousel Images -->
          <div class="carousel-inner bg-dark">

            <div class="carousel-item active">
              <div style="height:485px; background:url([LINKCAROUSELIMAGE]) center; background-size:cover;"></div>
            </div>
            <div class="carousel-item">
              <div style="height:485px; background:url([LINKCAROUSELIMAGE]) center; background-size:cover;"></div>
            </div>
            <div class="carousel-item">
              <div style="height:485px; background:url([LINKCAROUSELIMAGE]) center; background-size:cover;"></div>
            </div>

          </div>
          <!-- End Carousel Images -->

        </div>
        <!-- End Carousel -->

      </div>
    </div>
    <!------------------------------- END RIGHT BOX -------------------------------->

  </div>
  <!------------------------------- END MIDDLE SECTION -------------------------------->

  <!------------------------------- START CODE CREDS -------------------------------->
  <div class="col-12 bg-primary py-2 text-center" style="font-size:1.2rem; border:#000000 8px solid;">
    <a href="https://toyhou.se/16006417.overlay" data-toggle="tooltip" title="Header Code Frankensteined From: CuckooHoopoe"><span style="color:#FFFFFF;"><i class="fas fa-feather-pointed fa-flip-horizontal"></i></span></a>
    <a href="https://toyhou.se/21152316.poisonous-directory" data-toggle="tooltip" title="Code By: TomcatCodes / CrispinAsheYA"><span style="color:#FFFFFF;"><i class="fas fa-egg"></i></span></a>
    <a href="[LINKHEADERIMAGESOURCE]" data-toggle="tooltip" title="Header Image Source"><span style="color:#FFFFFF;"><i class="fas fa-feather-pointed"></i></span></a>
  </div>
  <!------------------------------- END CODE CREDS -------------------------------->

</div>

<!--
[LINKHEADERIMAGE] | [LINKHEADERIMAGESOURCE]
[LINKTAG] | [TEXTTAG]
[TEXTBASICOVERVIEW] | [TEXTSEASONOVERVIEW]
[LINKCHARACTER] | [LINKIMAGECHARACTER] | [TEXTCHARACTERNAME] | [TEXTSHORTDESC]
[LINKCAROUSELIMAGE]
-->