World Front Page (Bootstrap)

<!-- PLEASE SEE HERE FOR MY CODE RULES: https://toyhou.se/12931952.bonus-content/17098747.03-terms-of-service --

Version: 1.0

Default Colours
-Border Black: #000000

Scroll To The Bottom for every single "Find & Replace" Variable! Make sure you also include the square brackets when you highlight to Find & Replace!
(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 TOP IMAGE ----------->
<div class="col-12 my-3 p-0 rounded-0" style="background:url([IMAGETOP]) center; background-size:cover; background-attachment:fixed; height:420px; border:#000000 8px solid;">
</div>
<!---------- END TOP IMAGE ----------->

<!---------- START TAGS ----------->
<div class="col-12 bg-dark p-3 my-3 rounded-0 text-center" style="border:#000000 8px solid;">
    <span class="btn bg-primary mx-2 my-2 my-lg-0 py-2 px-5 text-white border-0 rounded-0">[SETTING]</span>
    <span class="btn bg-primary mx-2 my-2 my-lg-0 py-2 px-5 text-white border-0 rounded-0">[GENRE]</span>
    <span class="btn bg-primary mx-2 my-2 my-lg-0 py-2 px-5 text-white border-0 rounded-0">[RATING]</span>
    <span class="btn bg-primary mx-2 my-2 my-lg-0 py-2 px-5 text-white border-0 rounded-0">[TIMEPERIOD]</span>
    <span class="btn bg-primary mx-2 my-2 my-lg-0 py-2 px-5 text-white border-0 rounded-0">Joining World [OPEN/CLOSED]</span>
    <span class="btn bg-primary mx-2 my-2 my-lg-0 py-2 px-5 text-white border-0 rounded-0">RP [OPEN/CLOSED]</span>
</div>
<!---------- END TAGS ----------->

<!---------- START SIDEBAR & INFO ----------->
<div class="col-12 row no-gutters my-3 p-0 h-100">

  <!---------- START SIDEBAR ----------->
  <div class="col-lg-3 col-12 py-2 pr-lg-2">
    <div class="col-12 bg-dark row no-gutters h-100 p-3 m-0 rounded-0" style="border:#000000 8px solid;">

    <!---------- START BUTTONS ----------->
    <a class="btn btn-block btn-primary m-2 text-white border-0 rounded-0" href="[LINKBUTTON]">[TEXTBUTTON]</a>
    <a class="btn btn-block btn-primary m-2 text-white border-0 rounded-0" href="[LINKBUTTON]">[TEXTBUTTON]</a>
    <a class="btn btn-block btn-primary m-2 text-white border-0 rounded-0" href="[LINKBUTTON]">[TEXTBUTTON]</a>
    <a class="btn btn-block btn-primary m-2 text-white border-0 rounded-0" href="[LINKBUTTON]">[TEXTBUTTON]</a>
    <a class="btn btn-block btn-primary m-2 text-white border-0 rounded-0" href="[LINKBUTTON]">[TEXTBUTTON]</a>
    <!---------- END BUTTONS ----------->

    </div>
  </div>
  <!---------- END SIDEBAR ----------->

  <!---------- START INFO ----------->
  <div class="col-lg-9 col-12 py-2 pl-lg-2">
    <div class="col-12 bg-dark text-light h-100 p-4 m-0 rounded-0" style="border:#000000 8px solid;">
      <h1 class="display-3 text-primary text-uppercase"><i class="fas fa-leaf-maple fa-flip-horizontal"></i> <b>OVERVIEW</b></h1>
      <p>[TEXTDESCRIPTION]</p>
    </div>
  </div>
  <!---------- END INFO ----------->

</div>
<!---------- END SIDEBAR & INFO ----------->

<!---------- START MAIN CAST ----------->
<div class="col-12 bg-dark my-3 p-0 rounded-0" style="border:#000000 8px solid;">
  <h1 class="display-3 text-primary text-uppercase text-center pt-3"><i class="fas fa-leaf-maple fa-flip-horizontal"></i> <b>MAIN CAST</b> <i class="fas fa-leaf-maple"></i></h1>
  <div class="row no-gutters p-3 justify-content-around text-center">

    <div class="card bg-transparent m-3 border-0" style="width:190px; margin-left:auto; margin-right:auto;">
      <a data-toggle="tooltip" href="[LINKCHARACTER]"><img src="[IMAGECHARACTER]" style="width:190px; height:190px;"></a>
      <a class="btn-block btn-primary text-white p-2 border-0 rounded-0" href="[LINKCHARACTER]">【 [CHARACTERNAME] 】</a>
      <div class="bg-secondary text-light p-2 border-0 rounded-0">[ROLE/QUOTE/TITLE]</div>
    </div>

  </div>
</div>
<!---------- END MAIN CAST ----------->

<!---------- START OTHER CHARACTERS ----------->
<div style="border:#000000 8px solid;">

  <div class="col-12 collapsed btn btn-primary m-0 p-0 rounded-0">
  <a class="nav-link text-white" href="#othercharacters" data-toggle="collapse" aria-expanded="true">
      <h1 class="display-3 text-uppercase text-center"><b>Other Characters</b></h1>
  </a>
  </div>

  <div class="collapse bg-dark" id="othercharacters">

    <div class="row no-gutters p-3 justify-content-around text-center">

      <div class="card bg-transparent m-3 border-0" style="width:190px; margin-left:auto; margin-right:auto;">
        <a data-toggle="tooltip" href="[LINKCHARACTER]"><img src="[IMAGECHARACTER]" style="width:190px; height:190px;"></a>
        <a class="btn-block btn-primary text-white p-2 border-0 rounded-0" href="[LINKCHARACTER]">【 [CHARACTERNAME] 】</a>
        <div class="bg-secondary text-light p-2 border-0 rounded-0">[ROLE/QUOTE/TITLE]</div>
      </div>

    </div>

  </div>

</div>
<!---------- END OTHER CHARACTERS ----------->

<div class="text-center">
  <a class="text-white" href="https://toyhou.se/25599261.world-front-page"><i class="fas fa-leaf-maple fa-flip-horizontal"></i> Code By TomcatCodes / CrispinAsheYA <i class="fas fa-leaf-maple"></i></a>
</div>

<!--
[IMAGETOP]
[SETTING] | [GENRE] | [RATING] | [TIMEPERIOD]| [OPEN/CLOSED]
[LINKBUTTON] | [TEXTBUTTON]
[TEXTDESCRIPTION]
[LINKCHARACTER] | [IMAGECHARACTER] | [CHARACTERNAME] | [ROLE/QUOTE/TITLE]
-->