Fashion Worldbuilding - World - (Custom Colours)

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

Version 1

Default Colours
-Orange: #573100
-Dark Orange : #E7BC91
-Text White: #FFFFFF
-Text Black: #000000
-fas fa-feather-pointed

Quick Changes:
(Highlight These and press ctrl+F to change commonly-changed information quickly!)
[BACKGROUNDIMAGE]              [Replace with Image URL]
[LEFTIMAGE1]                   [Replace with Image URL]
[LEFTIMAGE1URL]                [Replace with Image Source URL]
[LEFTIMAGE2]                   [Replace with Image URL]
[LEFTIMAGE2URL]                [Replace with Image Source URL]
[TITLE]
[SUBHEADING1]
[TEXT1]
[SUBHEADING2]
[TEXT2]

Thank you for reading!
Crispin

-->


<!-------------------------------------------------- START BACKGROUND COLOUR & IMAGE -------------------------------------------------->

<!-- The Background image! -->
<div style="background-image: url([BACKGROUNDIMAGE]); background-size:cover; background-position:top-center; overflow:auto;" class="card-block">

<!-------------------------------------------------- END BACKGROUND COLOUR & IMAGE -------------------------------------------------->

  <div class="tab-content;"><!-- This sets up the box you're writing in. I suggest not fiddling this. -->

  <!--------------------------------------------------------  START CONTENT -------------------------------------------------------->

  <div class="row p-3 tab-pane fade show active"> <!-- Sets up the content of the images and info section. Do not touch this. -->

    <!-------------------------------------------------------- START IMAGES ------------------------------------------------------>

    <div class="col-12 col-lg-4"><!-- Starts Images -->

      <!-- Each one of these is an image! This is a massive, ugly block of code because you're only expected to change the Background Image & Image Source -->
      <div class="card mb-3 mb-lg-0" style="background-image:url([LEFTIMAGE1]); background-size:cover; background-position:top-center; border:6px #573100 solid; border-radius:0px;"><div class="col-12 col-xl-10" style="max-width:350px;"><div class="container p-3" style="height:357px; max-width:350px;">
        <a href="[LEFTIMAGE1URL]" data-toggle="tooltip" title="Image Source" style="color:#FFFFFF; position:absolute; top:3px; right:7px; font-size:2rem;"> <i class="fas fa-feather-pointed"></i> </a> <!-- Link To Fullsize Image --></div></div></div>

      <div class="card mb-3 mb-lg-0" style="background-image:url([LEFTIMAGE2URL]); background-size:cover; background-position:top-center; border:6px #573100 solid; border-radius:0px;"><div class="col-12 col-xl-10" style="max-width:350px;"><div class="container p-3" style="height:357px; max-width:350px;">
      <a href="[LEFTIMAGE2URL]" data-toggle="tooltip" title="Image Source" style="color:#FFFFFF; position:absolute; top:3px; right:7px; font-size:2rem;"> <i class="fas fa-feather-pointed"></i> </a> <!-- Link To Fullsize Image --></div></div></div>

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

    <!------------------------------------------------------ END IMAGES ----------------------------------------------------->

    <!----------------------------------------------------------- START INFO ------------------------------------------------------------>

    <div class="col-12 col-lg-8"><!-- Sets up Info -->

      <div class="card" style="height:735px; color:#573100; font-family:'comic sans ms'; font-size:1rem; background:#E7BC91; border:6px #573100 solid; border-radius:0px"><!-- Sets up Info's Content -->

        <!------ START HEADER ------>
        <div class="card-header py-1 px-2 text-white" style="color:#573100; font-family:'comic sans ms'; font-size:2rem; background:#573100; border:6px #573100 solid; border-radius:0px">
          <span class="pull-left"><a href="https://toyhou.se/19079603.fashion-worldbuilding-html-" data-toggle="tooltip" title="Code by: TomcatCodes / CrispinAsheYA" data-original-title="Code by: TomcatCodes / CrispinAsheYA"><span style="color:#FFFFFF;"><i class="fas fa-feather-pointed"></i></span></a> [TITLE]</span>
        </div>
        <!------ END HEADER ------>

        <!------------------------------------------------------- START ACTUAL TEXT  ------------------------------------------------------->

        <div class="card-body p-3 table-responsive" style="max-height:675px; color:#000000;"> <!-- Sets up Text Card -->

          <!------ START SECTION 1 ------>
          <span style="color:#573100; font-family:'comic sans ms'; font-size:1.4rem;">[SUBHEADING1]</span><!-- The header at the top -->
          <hr class="mt-1 mb-2" style="border:1px #573100 dashed;"><!-- The lil underline beneath the header -->
          <p>[TEXT1]</p>
          <p>-</p>
          <!------ END SECTION 1 ------>

          <!------ START SECTION 2 ------>
          <span style="color:#573100; font-family:'comic sans ms'; font-size:1.4rem;">[SUBHEADING2]</span><!-- The header at the top -->
          <hr class="mt-1 mb-2" style="border:1px #573100 dashed;"><!-- The lil underline beneath the header -->
          <p>[TEXT2]</p>
          <p>-</p>
          <!------ END SECTION 2 ------>

          <!------ ADD MORE SECTIONS HERE ------>

        </div><!-- End Text Card -->

      </div><!-- End Info's Content -->

    </div><!-- End Info -->

  </div><!-- End "The Rest Of The Code" -->

</div> <!-- End Code! -->