Minimal Character Information (CHARACTER, F2U)

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

Default Colours
-Orange: #E85324
-Light Orange: #FD9855
-Text White: #FFFFFF
-Text Black: #000000
-Gradient 1: rgba(163,193,253,1)
-Gradient 2: rgba(232,83,36,1)

Thank you for reading!
Crispin

-->

<!---------------------------------------------------------  START BACKGROUND --------------------------------------------------------->

<div style="background-image: url(https://media.discordapp.net/attachments/917542533930823690/996466133202907206/unknown.png?width=574&height=578); background-size: cover; background-position: top-center; overflow: auto;" class="card-block">

  <!-- top divider credit -->
  <a href="https://toyhou.se/2108365.-resources/10613944.-dividers#35571013">
    <!-- top divider image address-->
    <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/35571013_OKTdBHRiFuWJcTS.png">
  </a>

  <!---------------------------------------------------------  END BACKGROUND --------------------------------------------------------->




  <!--------------------------------------------------------- START OF DO NOT REMOVE -------------------------------------------------------->


  <div class="mx-auto mt-5" style="max-width:700px; background:#E85324; color:#000000; font-family:MS Sans Serif; border:1px solid #E85324;">

    <!--------------------------------------------------------- START HEADER --------------------------------------------------------->

    <div style="border:1px solid #E85324;">
      <!-- Makes the header. Doesn't end until after the main-body div also ends, consider this DIV Bobby. -->

      <div class="col-lg-12 p-2" style="position:relative; border:2px solid #E85324; border-radius:5px; background:linear-gradient(0deg,rgba(201,58,92,1) 0%,rgba(232,83,36,1) 93%,rgba(232,83,36,1) 100%);"> <!-- This  makes up the main colour of the header. Sorry, I know, I try to stay clear of rgb but I HAD to use RGBA to do this. -->

        <a href="https://toyhou.se/CrispinAsheYA/characters/folder:2993051" data-toggle="tooltip" title="Go Home?"><span style="font-size:18px; color:#FFFFFF"><i class="fad fa-moon-stars"></i></span></a>

        <!-- Start Minimise/Minus Square -->
        <span class="pull-right" style="position:absolute; top:7px; right:65px;"> <!-- Makes it so this button is on the right of the header and is that size -->
          <i class="fas fa-minus p-1 justify-content-center" style="background:linear-gradient(135deg,rgba(163,193,253,1)50%, rgba(232,83,36,1)50%); border:1px solid #FFFFFF; color:#FFFFFF ;border-radius:5px; width:25px; height:25px;"></i>
        </span>
        <!-- End Minimise/Minus Square -->

        <!-- Start Maximise/Squares Square -->
        <span class="pull-right" style="position:absolute; top:7px; right:35px;">
          <i class="far fa-window-maximize p-1 justify-content-center" style="background:linear-gradient(135deg,rgba(163,193,253,1)50%, rgba(232,83,36,1)50%); border:1px solid #FFFFFF; color:#FFFFFF ;border-radius:5px; width:25px; height:25px;"></i> <! --Makes the button have that icon and be that colour -->
        </span>
        <!-- End Maximise/Squares Square -->

        <!-- Start Close/X Square -->
        <span class="pull-right" style="position:absolute; top:7px; right:5px;">
          <a href="#CloseThis" data-toggle="collapse">
          <i class="fas fa-times p-1 justify-content-center" style="background:linear-gradient(135deg,rgba(163,193,253,1)50%, rgba(232,83,36,1)50%); border:1px solid #FFFFFF; color:#FFFFFF ;border-radius:5px; width:25px; height:25px;"></i>
        </span> <!-- Button ends on this row -->
        <!-- Start Close/X Square -->

      </div> <!--- END HEADER --->

      <!--------------------------------------------------------- END HEADER --------------------------------------------------------->

      <!--- Wraps around all the code here so the close button actually closes your code. Just a fun little easter egg! -->
      <div id="CloseThis" class="collapse show"> <!--- /\/\ Let's call this <<< Div X. -->

        <!--------------------------------------------------------- START FOLDERS --------------------------------------------------------->

        <div class="col-sm-12 p-1"> <!-- Start Folders 1 (Defines Area) -->

          <div class="card border-0 rounded-0 p-1 h-100 justify-content-center" style="background:#FD9855;"> <!-- Start Folders 2 (Formatting) -->

            <div class="row no-gutters"> <!-- Contains links to your different folders -->

              <!-- Start Text -->
              <div class="text-center p-2; position:center;">
                <p style="font-family:'comic sans ms'; font-size:2rem">INFO</p>
                <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;">
                <p style="font-family:'comic sans ms'; font-size:1.4rem">History</p>
                <p style="font-family:'comic sans ms'; font-size:1rem">Okay, so this code is made for characters who just kind of exist. Write about any their history here! What inspired them? Why'd you make them? What character traits do they have? I like to give this code to everyone in my Orphanage / Trades folders because they don't have much lore, only random trivia facts, which this code is perfect for!</p>
                <p style="font-family:'comic sans ms'; font-size:1rem">Character Created: (11:58) 01.11.22</p>
              </div>
              <!-- End Text -->

            </div> <!-- End Folders -->

          </div> <!-- End Folders 2 -->

        </div> <!-- End Folders 1 -->

        <!--------------------------------------------------------- END FOLDERS -------------------------------------------------------->

      </div> <!--- End DIV X -->

    </div> <!--- End DIV Bobby -->

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

</div> <!-- End Of Colour -->

<!--------------------------------------------------------- CREDIT DO NOT REMOVE --------------------------------------------------------->
<div class="text-right w-100">
  <a href="https://toyhou.se/18652345.minimal-character-information" target="_blank" class="m-1" style="color:#fff;"><i class="fas fa-code"></i> Code By CrispinAsheYA</a>
</div>