World Front Page (Custom Colours)

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

Version: 1.0

Default Colours
-Main Colour: #C95203
-Background Light: #F4EDE9
-Subheading: #E6DEDA
-Text White: #FFFFFF
-Text Dark: #000001
-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 p-3 my-3 rounded-0 text-center" style="background-color:#F4EDE9; border:#000000 8px solid;">
    <span class="btn mx-2 my-2 my-lg-0 py-2 px-5 border-0 rounded-0" style="color:#FFFFFF; background-color:#C95203;">[SETTING]</span>
    <span class="btn mx-2 my-2 my-lg-0 py-2 px-5 border-0 rounded-0" style="color:#FFFFFF; background-color:#C95203;">[GENRE]</span>
    <span class="btn mx-2 my-2 my-lg-0 py-2 px-5 border-0 rounded-0" style="color:#FFFFFF; background-color:#C95203;">[RATING]</span>
    <span class="btn mx-2 my-2 my-lg-0 py-2 px-5 border-0 rounded-0" style="color:#FFFFFF; background-color:#C95203;">[TIMEPERIOD]</span>
    <span class="btn mx-2 my-2 my-lg-0 py-2 px-5 border-0 rounded-0" style="color:#FFFFFF; background-color:#C95203;">Joining World [OPEN/CLOSED]</span>
    <span class="btn mx-2 my-2 my-lg-0 py-2 px-5 border-0 rounded-0" style="color:#FFFFFF; background-color:#C95203;">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 row no-gutters h-100 p-3 m-0 rounded-0" style="background-color:#F4EDE9; border:#000000 8px solid;">

    <!---------- START BUTTONS ----------->
    <a class="btn btn-block m-2 border-0 rounded-0" style="color:#FFFFFF; background-color:#C95203;" href="[LINKBUTTON]">[TEXTBUTTON]</a>
    <a class="btn btn-block m-2 border-0 rounded-0" style="color:#FFFFFF; background-color:#C95203;" href="[LINKBUTTON]">[TEXTBUTTON]</a>
    <a class="btn btn-block m-2 border-0 rounded-0" style="color:#FFFFFF; background-color:#C95203;" href="[LINKBUTTON]">[TEXTBUTTON]</a>
    <a class="btn btn-block m-2 border-0 rounded-0" style="color:#FFFFFF; background-color:#C95203;" href="[LINKBUTTON]">[TEXTBUTTON]</a>
    <a class="btn btn-block m-2 border-0 rounded-0" style="color:#FFFFFF; background-color:#C95203;" 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 h-100 p-4 m-0 rounded-0" style="color:#000001; background-color:#F4EDE9; border:#000000 8px solid;">
      <h1 class="display-3 text-uppercase" style="color:#C95203;"><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 my-3 p-0 rounded-0" style="background-color:#F4EDE9; border:#000000 8px solid;">
  <h1 class="display-3 text-uppercase text-center pt-3" style="color:#C95203;"><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 p-2 border-0 rounded-0" href="[LINKCHARACTER]" style="color:#FFFFFF; background-color:#C95203;">【 [CHARACTERNAME] 】</a>
      <div class="p-2 border-0 rounded-0" style="color:#000001; background-color:#E6DEDA;">[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 m-0 p-0 rounded-0" style="background-color:#C95203;">
  <a class="nav-link" href="#othercharacters" data-toggle="collapse" aria-expanded="true" style="color:#FFFFFF;">
    <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 p-2 border-0 rounded-0" href="[LINKCHARACTER]" style="color:#FFFFFF; background-color:#C95203;">【 [CHARACTERNAME] 】</a>
        <div class="p-2 border-0 rounded-0" style="color:#000001; background-color:#E6DEDA;">[ROLE/QUOTE/TITLE]</div>
      </div>

    </div>

  </div>

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

<div class="text-center">
  <a href="https://toyhou.se/25599261.world-front-page" style="color:#FFFFFF;"><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]
-->