<!----- BEGIN CODE. ------>
    <div class="container py-4" style="max-width: 980px">
        <!----- CHARACTER NAME. May look a little funky if it's very long. ------>
            <h1
              class="px-4 pb-2 pt-2 text-center bg-primary"
              style="font-size: 44px; margin: 0"
            >
              CHARACTER NAME
            </h1>
        <!----- END CHARACTER NAME. ------>
        <!----- BASICS SECTION. Begins with the left column! The "title=" attribute should be changed along with any icons you edit. ------>
            <div class="card py-4 bg-faded rounded-0 border-0">
              <div class="row px-3 align-items-center">
                <div class="col-md-4 mt-2 mb-3">
                  <div class="justify-content-between">
                    Nickname(s)
                    <span class="text-secondary" title="Nickname(s)"
                      ><i class="fad fa-signature fa-xl"
                    /></span>
                  </div>
                  <hr class="text-secondary bg-secondary" style="border: 1px solid" />
                  <div class="justify-content-between mt-2">
                    Race/Species
                    <span class="text-secondary" title="Species"
                      ><i class="fad fa-dna fa-xl"
                    /></span>
                  </div>
                  <hr class="text-secondary bg-secondary" style="border: 1px solid" />
                  <div class="justify-content-between mt-2">
                    Gender (prns)
                    <span class="text-secondary" title="Gender"
                      ><i class="fad fa-venus-mars fa-xl"
                    /></span>
                  </div>
                  <hr class="text-secondary bg-secondary" style="border: 1px solid" />
                  <div class="justify-content-between mt-2 mb-1">
                    Orientation
                    <span class="text-secondary" title="Orientation"
                      ><i class="fad fa-heart-half fa-xl"
                    /></span>
                  </div>
                  <hr class="text-secondary bg-secondary" style="border: 1px solid" />
                  <div class="justify-content-between mt-2 mb-1">
                    Mar. 12 (Age)
                    <span class="text-secondary" title="Birthday"
                      ><i class="fad fa-cake fa-xl"
                    /></span>
                  </div>
                </div>
        <!----- END LEFT COLUMN. ------>
        <!----- IMAGE. Adjusts with code width. ------>
                <div class="col-md-4 mb-2">
                  <div
                  class="text-secondary"
                    style="
                      background: url(https://images.unsplash.com/photo-1523510468197-455cc987be86?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80)
                        center no-repeat;
                      background-size: cover;
                      min-height: 250px;
                      max-height: 250px;
                      border: 8px solid;
                    "
                  ></div>
        <!----- END IMAGE. ------>
        <!----- DESCRIPTION BELOW IMAGE. Small descriptions/quotes work best. Larger blocks of text will distort some of this section. ------>
                  <h3
                    class="text-center pt-1 pb-3 px-3 bg-secondary"
                    style="font-size: 17px"
                  >
                    SMALL TEXT DESC.
                  </h3>
                </div>
        <!----- END DESCRIPTION. The last /div is connected to the icon. ------>
        <!----- RIGHT COLUMN. ------>
                <div class="col-md-4 mt-2 mb-3">
                  <div class="justify-content-between">
                    <span class="text-secondary" title="Personality"
                      ><i class="fad fa-head-side fa-xl"
                    /></span>
                    ENTJ 8w7
                  </div>
                  <hr class="text-secondary bg-secondary" style="border: 1px solid" />
                  <div class="justify-content-between mt-2">
                    <span class="text-secondary" title="Occupation"
                      ><i class="fad fa-briefcase fa-xl"
                    /></span>
                    Job Desc.
                  </div>
                  <hr class="text-secondary bg-secondary" style="border: 1px solid" />
                  <div class="justify-content-between mt-2">
                    <span class="text-secondary" title="Residence"
                      ><i class="fad fa-house-chimney-window fa-xl"
                    /></span>
                    405 Home St.
                  </div>
                  <hr class="text-secondary bg-secondary" style="border: 1px solid" />
                  <div class="justify-content-between mt-2 mb-1">
                    <span class="text-secondary" title="Relationship Status"
                      ><i class="fad fa-rings-wedding fa-xl"
                    /></span>
                    Single
                  </div>
                  <hr class="text-secondary bg-secondary" style="border: 1px solid" />
                  <div class="justify-content-between mt-2 mb-1">
                    <span class="text-secondary" title="Story Status"
                      ><i class="fad fa-book-open fa-xl"
                    /></span>
                    Ongoing
                  </div>
                </div>
        <!----- END RIGHT COLUMN. ------>
              </div>
        <!----- END BASICS SECTION. ------>
        <!----- CHARACTER SUMMARY. ------>
              <p class="px-5 mt-3 mb-4 text-center" style="font-size: 17px">
                <b
                  >Type a general description/summary here! Boxes will resize with
                  content.</b
                >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin
                elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor
                lacus, et venenatis elit feugiat non.
              </p>
        <!----- END CHARACTER SUMMARY. ------>
        <!----- HISTORY SECTION.  ------>
              <h2 class="px-3 pb-2 pt-2 text-center bg-primary" style="font-size: 33px">
                HISTORY
              </h2>
        <!----- END HISTORY TITLE. ------>
        <!----- DESCRIPTION. Make sure to adjust the "mb-x" and "mt-x" (margin-top and margin-bottom) values when adding paragraphs. Paragraphs that are sandwiched between other paragraphs present best with a margin-bottom value of 3 (p class="px-4 mb-3"). ------>
              <p class="px-4 mt-3">
                <b>Lorem ipsum dolor sit amet,</b> consectetur adipiscing elit. Duis
                sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan
                tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit
                blandit dapibus. Curabitur ac finibus eros.  Duis porta eros et velit blandit
                dapibus. Curabitur ac finibus eros.
              </p>
              
              <p class="px-4 mb-4">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin
                elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor
                lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit
                dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa
                sodales, eget mattis nibh pellentesque.
              </p>
        <!----- SUBHEADER. You can add more of these to break up large amounts of writing. ------>
              <h2
                class="px-3 pb-1 pt-1 mx-4 text-center bg-secondary"
                style="font-size: 24px"
              >
                SUBHEADER
              </h2>
        <!----- END SUBHEADER. ------>
              <p class="px-4 mt-3">
                <b>Lorem ipsum dolor sit amet,</b> consectetur adipiscing elit. Duis
                sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan
                tempor lacus, et venenatis elit feugiat non.  Duis porta eros et velit blandit
                dapibus. Curabitur ac finibus eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor
                lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit
                dapibus. Curabitur ac finibus eros.
              </p>
              
              <p class="px-4 mb-4">
                Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis
                placerat velit vitae massa sodales, eget mattis nibh pellentesque.
              </p>
        <!----- END DESCRIPTION. END HISTORY SECTION. ------>
        <!----- SOCIAL LIFE SECTION. ------>
              <h2 class="px-3 pb-2 pt-2 text-center bg-primary" style="font-size: 33px">
                SOCIAL LIFE
              </h2>
        <!----- END SOCIAL LIFE TITLE. ------>
        <!----- PUBLIC LIFE (LEFT COLUMN). ------>
              <div class="row mt-3 px-4">
                <div class="col-md-6 mb-4">
                  <h3 class="text-center">
                    <i class="text-secondary fad fa-users fa-lg mr-2" /> IN PUBLIC
                  </h3>
                  <hr class="text-secondary bg-secondary" style="border: 1px solid" />
                  <b>How does your character act in the presence of others?</b> Lorem
                  ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin
                  elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor
                  lacus, et venenatis elit feugiat non.
                </div>
        <!----- END PUBLIC LIFE (LEFT COLUMN). ------>
        <!----- PRIVATE LIFE (RIGHT COLUMN). ------>
                <div class="col-md-6 mb-4">
                  <h3 class="text-center">
                    IN PRIVATE <i class="text-secondary fad fa-door-open fa-lg ml-2" />
                  </h3>
                  <hr class="text-secondary bg-secondary" style="border: 1px solid" />
                  <b>How does your character change when no one is looking?</b> Lorem
                  ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin
                  elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor
                  lacus, et venenatis elit feugiat non.
                </div>
        <!----- END PRIVATE LIFE (RIGHT COLUMN). ------>
              </div>
        <!----- END BOTH COLUMNS. ------>
        <!----- CHARACTER LINKS. To add more links, copy ALL of the code from "CHARACTER LINK #" to "END OF CHARACTER LINK #" and paste at the end of all character links. To remove a link, simply highlight the same portion of code and delete. You can mess around with the "col-sm" values if content looks funky. ------>
              <div class="row px-4 justify-content-center">
        <!----- CHARACTER LINK 1. ------>
                <div class="col-sm-4 mb-4">
                    <hr class="text-secondary bg-secondary mb-1" style="border: 1px solid; margin: 0" />
                  <h3
                    class="text-center pt-1 pb-2"
                    style="font-size: 22px; margin: 0"
                  ><a href="URL" target="_blank" style="text-decoration: none;">
                    
                  CHARACTER LINK
                  </h3></a>
        <!----- IMAGE. Adjusts with code width. ------>
                  <div
                      class="text-secondary"
                      style="
                        background: url(https://images.unsplash.com/photo-1506079478915-3f458c5077a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80)
                          center no-repeat;
                        background-size: cover;
                        min-height: 200px;
                        max-height: 200px;
                        border: 8px solid;
                      "
                    ></div
                  >
                  <h3
                    class="text-center pt-1 pb-3 px-3 bg-secondary"
                    style="font-size: 17px"
                  >
                    SIBLING
                  </h3>
                  <b>Write a short description here.</b> Lorem ipsum dolor sit amet,
                  consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit
                  viverra sed eget odio.
                </div>
        <!----- END CHARACTER LINK 1. ------>
        <!----- CHARACTER LINK 2. ------>
                <div class="col-sm-4 mb-4">
                    <hr class="text-secondary bg-secondary mb-1" style="border: 1px solid; margin: 0" />
                  <h3
                    class="text-center pt-1 pb-2"
                    style="font-size: 22px; margin: 0"
                  ><a href="URL" target="_blank" style="text-decoration: none;">
                    
                  CHARACTER LINK
                  </h3></a>
        <!----- IMAGE. Adjusts with code width. ------>
                  <div
                      class="text-secondary"
                      style="
                        background: url(https://images.unsplash.com/photo-1535498730771-e735b998cd64?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80)
                          center no-repeat;
                        background-size: cover;
                        min-height: 200px;
                        max-height: 200px;
                        border: 8px solid;
                      "
                    ></div
                  >
                  <h3
                    class="text-center pt-1 pb-3 px-3 bg-secondary"
                    style="font-size: 17px"
                  >
                    CONFIDANT
                  </h3>
                  <b>Write a short description here.</b> Lorem ipsum dolor sit amet,
                  consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit
                  viverra sed eget odio.
                </div>
        <!----- END CHARACTER LINK 2. ------>
        <!----- CHARACTER LINK 3. ------>
                <div class="col-sm-4 mb-4">
                    <hr class="text-secondary bg-secondary mb-1" style="border: 1px solid; margin: 0" />
                  <h3
                    class="text-center pt-1 pb-2"
                    style="font-size: 22px; margin: 0"
                  ><a href="URL" target="_blank" style="text-decoration: none;">
                    
                  CHARACTER LINK
                  </h3></a>
        <!----- IMAGE. Adjusts with code width. ------>
                  <div
                      class="text-secondary"
                      style="
                        background: url(https://images.unsplash.com/photo-1529905270444-b5e32acc3bdd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80)
                          center no-repeat;
                        background-size: cover;
                        min-height: 200px;
                        max-height: 200px;
                        border: 8px solid;
                      "
                    ></div
                  >
                  <h3
                    class="text-center pt-1 pb-3 px-3 bg-secondary"
                    style="font-size: 17px"
                  >
                    ENEMY
                  </h3>
                  <b>Write a short description here.</b> Lorem ipsum dolor sit amet,
                  consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit
                  viverra sed eget odio.
                </div>
        <!----- END CHARACTER LINK 3. ------>
              </div>
        <!----- END SOCIAL LIFE SECTION. ------>
        <!----- TRIVIA SECTION. ------>
              <h2 class="px-3 pb-2 pt-2 text-center bg-primary" style="font-size: 33px">
                TRIVIA
              </h2>
              <div class="row px-4 mt-3">
                  <div class="col-md-6">
                      
                      <div class="row">
                          <div class="col-md-6">
                              <h3 class="text-center">
                    <i class="text-secondary fad fa-check fa-lg mr-2" /> LOVES
                  </h3>
                  <hr class="text-secondary bg-secondary" style="border: 1px solid" />
                  <ul style="list-style-type: square;">
                      <li class="mb-1">
                          Lorem
                      </li>
                      <li class="mb-1">
                          Lorem ipsum dolor
                      </li>
                      <li class="mb-1">
                          Lorem ipsum dolor
                      </li>
                      <li class="mb-1">
                          Lorem ipsum
                      </li>
                  </ul>
                          </div>
                          <div class="col-md-6">
                              <h3 class="text-center">
                     HATES <i class="text-secondary fad fa-x fa-lg ml-2" />
                  </h3>
                  <hr class="text-secondary bg-secondary" style="border: 1px solid" />
                  <ul style="list-style-type: square;">
                      <li class="mb-1">
                          Lorem
                      </li>
                      <li class="mb-1">
                          Lorem ipsum dolor
                      </li>
                      <li class="mb-1">
                          Lorem ipsum dolor
                      </li>
                      <li class="mb-1">
                          Lorem ipsum
                      </li>
                  </ul>
                          </div>
                      </div>
                  </div>
                  <div class="col-md-6">
                      <h2
                class="px-3 pb-1 pt-1 text-center bg-secondary"
                style="font-size: 26px"
              >
                NOTES
              </h2>
              <ul style="list-style-type: square;">
                      <li class="mb-1">
                          Lorem ipsum dolor sit amet,
                  consectetur adipiscing elit.
                      </li>
                      <li class="mb-1">
                          Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
                      </li>
                      <li class="mb-1">
                          Donec accumsan tempor lacus, et venenatis elit feugiat non.
                      </li>
                      <li class="mb-1">
                          Duis porta eros et velit blandit dapibus.
                      </li>
                  </ul>
                  </div>
              </div>
            </div>
        <!----- END TRIVIA SECTION. ------>
        <!----- CREDITS. ------>
            <h2 class="pb-3 pt-3 text-center bg-primary" style="font-size: 20px"></h2>
              
              <div class="justify-content-between">
        <!----- IMAGE CREDITS. You can cut this portion out if all art/pictures are your own. ------>
                  <span style="font-size: 15px">
                      <a href="https://unsplash.com/photos/5tsvxCrFi_I" target="_blank" title="Image #1"><i class="fad fa-image fa-lg mr-2" /></a>
                      <a href="https://unsplash.com/photos/-T0La6F_WrE" target="_blank" title="Image #2"><i class="fad fa-image fa-lg mr-2" /></a>
                      <a href="https://unsplash.com/photos/KTdzeb28jyo" target="_blank" title="Image #3"><i class="fad fa-image fa-lg mr-2" /></a>
                      <a href="https://unsplash.com/photos/Nukqi6L_5DU" target="_blank" title="Image #4"><i class="fad fa-image fa-lg" /></a></span>
        <!----- END IMAGE CREDITS. ------>
        <!----- CODE CREDIT. Consider NOT removing this part! ------>
              <p style="font-size: 15px">
                  <a href="https://toyhou.se/GEEKY" target="_blank" title="Code by GEEKY">
                <i class="fad fa-glasses-round fa-lg ml-1" /></a>
              </p>
        <!----- END CODE CREDIT. ------>
              </div>
            </div>
        <!----- END CODE. ------>