MODULAR: Boxed ReColor 1.0

<!--
Code by CivilEngideer, Code Credit Link can be Moved but not Removed.
Comment when you use this code! I love seeing it used!

---- USE NOTES ----
-May be Wacky. That's life.
-This is the custom color version of this code. Make sure you grab all the correct modules. I suggest grabbing everything you want THEN changing the colors so you can use the Ctrl+F list.
-I suggest https://unsplash.com/ for big images that'll hold up.
-You can edit this to hell and back but please don't smack it into other coders stuff.
-Not tested in WYSIWYG
-A good way to check how things are going as you edit is to use this site: https://th.circlejourney.net/
I suggest using it while you're trying to pick out the order of your modules!

---- Crtl+F is your friend ----
-URL HERE is where links go
-IMG HERE is where img urls go
-#HEXCODE is where a custom hexcode color goes
-ICON is where a fontawesome name goes

Here's all the placeholder colors, if you hit the + on the Ctrl+F menu there's an option to replace all which will help immensely.
-Background: #F1DAC4
-Background 2: #E1DDE3
-The Box: #FFB69D
-Header Text: #0D0C1D
-Subheader: #5D6098
-Text: #161B33
-Links: #7E6E87
-Text on pictures: #C1D9EB
-Divider Line: #474973
-Warning: #D08239
-Fancy Border Box: #5464B6
-List Bullet: #707EC2

---- Add Gradient ----
If you want to add a background gradient, use this to replace the
  background-color: #HEXCODE
part of the style="" section, mess with the angle and percent for different looks!:
background: linear-gradient(45 deg, #HEXCODE 25%, #HEXCODE 75%);

---- Adding Links ----
If you want to add a link and have it look the same use:
    <a style="color:#7E6E87" href="URL HERE">words</a>

---- Divider Line ----
The divider line between the titles and the bodies of the text is this bit:
    <hr style="border-color: #474973;" class="w-100">

---- Fontawesome Icons ----
If you want to put a fontawesome icon in the header just put this bit right next to the title text and add in the fontawesome icon of your choice. You can use this anywhere you want icons actually.
    <i class="ICON"></i>
Colored version:
    <i style="color:#HEXCODE;" class="ICON"></i>
If you want a list where the bullets are icons, replace the <ul> section with this:
    <ul class="fa-ul">
    <li><span class="fa-li"><i class="ICON"></i></span>list item
    </li>
    <li><span class="fa-li"><i class="ICON"></i></span>two
    </li>
    <ul class="fa-ul">
    <li><span class="fa-li"><i class="ICON"></i></span>indented
    </li></ul>
    <li><span class="fa-li"><i class="ICON"></i></span>regular
    </li>
    </ul>

---- Changing Fonts ----
If you're wanting the true Homestuck look (or to just change a font), add this into the
    style=""
before the text you want to change:
font-family:courier new;
If it just has a class and no style, add that bit too, here's an example of before and after:
    <div class="p-0 font-italic">
    <p>"This is a quote"</p>
    </div>
Edited Version:
    <div class="p-0 font-italic" style="font-family:courier new;">
    <p>"This is a quote"</p>
    </div>
It might take some trial and error to identify the correct divs, save often and do your best.
Other fonts you can use, just replace "courier new" from the chunk above, include spaces but
not commas:
andale mono, arial, times new roman, arial black, calibri, comic sans ms, georgia, helvetica, impact, tahoma, terminal, trebuchet ms, palatino, garamond, bookman

---- Picture Alignments ----
If you want a picture to not do the scrolly thing delete this bit:
    background-attachment: fixed;
If you're not happy with how a picture is aligned change this segment, some options are top-left, right, bottom, etc.:
    background-position: center;
You can also use percents! (ex 25% 45% ) but they only change position from top, not left or right.
-->

<div class="row no-gutters p-3 mx-auto my-md-3"
     style="max-width: 800px; background-color:#FFB69D">
  <div class="container-fluid px-0" style="max-width: 750px; letter-spacing: .45px;">

<!-- If you want to add something above the header put it here! -->

    <!-- HEADER START -->
    <div class="row">
      <div class="col-12 p-2">
        <div class="p-3 text-center" style="background-color:#E1DDE3">
          <div class="text-uppercase" style="letter-spacing:3px; font-size:25px; color:#0D0C1D;">
            NAME
          </div>
          <hr style="border-color: #474973;" class="w-100">
          <div style="color:#161B33" class="p-0 font-italic">
            <p>"This is a quote"
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- HEADER END -->
    <!-- THE CODE ZONE
This is where any of the code parts you want can go in any order!
Just make sure you copy the whole thing and that its not anywhere inside any other code part.-->









    <!-- CREDIT START -->
    <div class="row">
      <div class="col-12 p-2">
        <div class="p-3 text-center" style="background-color:#E1DDE3; color:#0D0C1D">
          <div class="font-italic">
            <!-- IMAGE/OTHER CREDITS -->
            <p>
              <a style="color:#7E6E87" href="URL HERE">1
              </a>
              /
              <a style="color:#7E6E87" href="URL HERE">2
              </a>
              /
              <a style="color:#7E6E87" href="URL HERE">2
              </a>
              /
              <a style="color:#7E6E87" href="URL HERE">3
              </a>
              <!-- CODER CREDIT
OK TO MOVE
DO NOT REMOVE -->
              <br>
              <a style="color:#7E6E87" href="https://toyhou.se/CivilEngideer">code
              </a>
            </p>
            <!-- CODER CREDIT
OK TO MOVE
DO NOT REMOVE -->
          </div>
        </div>
      </div>
    </div>
    <!-- CREDIT END -->
  </div>
</div>