Homely Nest (Bootstrap)

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

Version: 2.0

Default Colours
-Text White: #FFFFFF
-Border Black: #000000

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-12 p-0" style="color:#000000; font-size:1rem; border:none;">

  <!------------------------------- START HEADING -------------------------------->
  <div class="col-12 p-0" style="border:#000000 8px solid; border-bottom:#000000 4px solid;">
    <div class="card rounded-0" style="background:url([IMAGEHEADER]); background-position:center; background-size:cover; border:none;"><p class="justify-content-between display-4 m-1 p-3" style="color:#FFFFFF; background:rgba(0,0,0,0.7);">
    <span><a href="https://toyhou.se/19079603.fashion-worldbuilding-html-" data-toggle="tooltip" title="Code by: TomcatCodes / CrispinAsheYA"><span style="color:#FFFFFF;"><i class="fas fa-feather-pointed fa-flip-horizontal"></i></span></a> [TEXTTITLE]</span></p></div>
  </div>
  <!------------------------------- END HEADING -------------------------------->

  <!------------------------------- START MIDDLE SECTION -------------------------------->
  <div class="col-lg-12 mx-auto p-0 row" style="border:#000000 4px solid; border-top:none;">
    <div class="col-12 col-lg-3 p-0" style="border:none;">
      <div class="col-12 p-3 bg-primary" style="color:FFFFFF; font-size:1.2rem; border:#000000 4px solid;"><span style="color:#FFFFFF;"><i class="fas fa-feather-pointed fa-flip-horizontal"></i></span> Images</div>

      <!------------------------------- START IMAGES -------------------------------->
      <div class="col-12 p-3" style="background:url([IMAGE1]) center; background-size:cover; background-position:top-center; background-repeat:no-repeat; height:345px; border:#000000 4px solid;"></div>
      <div class="col-12 p-3" style="background:url([IMAGE2]) center; background-size:cover; background-position:top-center; background-repeat:no-repeat; height:345px; border:#000000 4px solid;"></div>
      <!------------------------------- END IMAGES -------------------------------->

    </div>

    <!------------------------------- START INFO -------------------------------->
    <div class="col-12 col-lg-9 bg-light p-0" style="border:none;">
      <div class="col-12 bg-primary p-3" style="color:FFFFFF; font-size:1.2rem; border:#000000 4px solid;"><span style="color:#FFFFFF;"><i class="fas fa-feather-pointed fa-flip-horizontal"></i></span> Info</div>

      <div style="height:690px; border:#000000 4px solid;">

        <!------------------------------- START SECTION -------------------------------->
        <div class="tab-pane active show"><!-- Start Main Section-->
          <div class="card-body p-3 table-responsive" style="max-height:690px;">

            <!------ START SECTION ------>
            <span class="text-primary" style="font-size:1.4rem;">[TEXTTOPICTITLE]</span>
            <hr class="mt-1 mb-2">
            <p>[TEXTTOPIC]</p>
            <p>-</p>
            <!------ END SECTION ------>

            <!-- Copy and paste from "Start Section" to "End Section" to add more -->

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

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

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

  <!------------------------------- START CREDITS -------------------------------->
  <div class="col-12 bg-primary py-3 text-center" style="border-top:none; border-left:#000000 8px solid; border-right:#000000 8px solid; border-bottom:#000000 8px solid;">
    <a href="[LINKIMAGE1]" data-toggle="tooltip" title="Image 1" data-original-title="Image 1" style="color:#FFFFFF; font-size:1.4rem;"><i class="fas fa-feather-pointed fa-flip-horizontal"></i></a>
    <a href="[LINKHEADERIMAGE]" data-toggle="tooltip" title="Header Background Image" data-original-title="Header Background Image" style="color:#FFFFFF; font-size:1.4rem;"><i class="fas fa-feather-pointed fa-flip-horizontal"></i></a>
    <a href="https://toyhou.se/19079603.fashion-worldbuilding-html-" data-toggle="tooltip" title="Code by: TomcatCodes / CrispinAsheYA" data-original-title="Code by: TomcatCodes / CrispinAsheYA" style="color:#FFFFFF; font-size:1.4rem;"><i class="fas fa-egg"></i></a>
    <a href="https://toyhou.se/16006417.overlay" data-toggle="tooltip" title="Header Code Frankensteined From: CuckooHoopoe" data-original-title="Header Code Frankensteined From: CuckooHoopoe" style="color:#FFFFFF; font-size:1.4rem;"><i class="fas fa-feather-pointed"></i></a>
    <a href="[LINKIMAGE2]" data-toggle="tooltip" title="Image 2" data-original-title="Image 2" style="color:#FFFFFF; font-size:1.4rem;"><i class="fas fa-feather-pointed"></i></a>
  </div>
  <!------------------------------- END CREDITS -------------------------------->

</div>
<!------------------------------- END ACTUAL CODE -------------------------------->

<!-- To quick-sort, all links begin with [L , all images begin with [I , and all editable text begins with [T -->
<!--
[IMAGEHEADER] | [TEXTTITLE]
[IMAGE1] | [IMAGE2]
[TEXTTOPICTITLE] | [TEXTTOPIC]
[LINKIMAGE1] | [LINKIMAGE2] | [LINKHEADERIMAGE]
-->