Freebie Again

<!----------
------------ default highlight color is #e8a4b0
------------ default link color is #999
------------ default font color is #14171A
------------
------------ use find & replace to quickly switch out hex codes
------------>

<div class="container-fluid card border-0 pt-5 pb-4" style="margin-top: -64px;">
<div class="container-fluid" style="max-width: 950px; letter-spacing: .4px; font-size: 11pt;">
  <!--- SET BACKGROUND PATTERN HERE ------------------>
  <div style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/18493463_E7zWDYoSCMyMjEH.png);
  border-radius: 1em; background-attachmen: fixed;" class="p-lg-5 p-md-4 p-3">
    <div class="row no-gutters">
      <div class="col-md-4 pr-md-2 mb-3">
        <!----- main focal image here -- will scale/crop with screen size -- focus of image is the top center ---->
          <div style="background-image: url(IMG_URL);
          background-size: cover; background-position:top center; min-height: 350px; border-radius: 1em; box-shadow: 0px 0px 12px rgba(0,0,0,.2);" class="h-100"></div>
      </div>
      <div class="col-md-8 pl-md-2 mb-3">
        <!----- content block ------------------------------------------>
          <div style="background: #fff; color: #14171A; box-shadow: 0px 0px 12px rgba(0,0,0,.2); border-radius: 1em;"
          class="pt-3 px-md-4 px-3 w-100 h-100 d-flex">
            <div class="w-100 my-auto">
            <!----- quote section ------------------------------------>
            <div class="w-100 display-flex justify-content-between mb-4">
              <span style="color: #e8a4b0"><i class="fas fa-quote-left fa-fw" /></span> <span class="text-center" style="font-style: italic; letter-spacing: 1px;">

                Put a quote here

              </span><span style="color: #e8a4b0"><i class="fas fa-quote-right fa-fw" /></span>
            </div>
            <!---- stats use font awesome icons --- feel free to customize the icons ----->
            <div class="row no-gutters">
              <div class="col-md-6 pr-md-1 mb-3">

                <i class="fas fa-user fa-fw" style="color: #e8a4b0;" />
                Name
              </div>
              <div class="col-md-6 pl-md-1 mb-3">

                <i class="fas fa-comment-dots fa-fw" style="color: #e8a4b0;" />
                Alias/nickname
              </div>

              <div class="col-md-6 pr-md-1 mb-3">

                <i class="fas fa-birthday-cake fa-fw" style="color: #e8a4b0;" />
                Age
              </div>
              <div class="col-md-6 pl-md-1 mb-3">

                <i class="fas fa-calendar-alt fa-fw" style="color: #e8a4b0;" />
                birthdate
              </div>

              <div class="col-md-6 pr-md-1 mb-3">

                <i class="fas fa-venus-mars fa-fw" style="color: #e8a4b0;" />
                Gender
              </div>
              <div class="col-md-6 pl-md-1 mb-3">

                <i class="fas fa-heartbeat fa-fw" style="color: #e8a4b0;" />
                orientation
              </div>

              <div class="col-md-6 pr-md-1 mb-3">

                <i class="fas fa-ruler fa-fw" style="color: #e8a4b0;" />
                Height
              </div>
              <div class="col-md-6 pl-md-1 mb-3">

                <i class="fas fa-question fa-fw" style="color: #e8a4b0;" />
                Race
              </div>

              <div class="col-md-6 pr-md-1 mb-3">

                <i class="fas fa-book fa-fw" style="color: #e8a4b0;" />
                Role/what they do
              </div>
              <div class="col-md-6 pl-md-1 mb-3">

                <i class="fas fa-balance-scale fa-fw" style="color: #e8a4b0;" />
                MBTI
              </div>

              <div class="col-md-6 pr-md-1 mb-3">

                <i class="fas fa-volume-up fa-fw" style="color: #e8a4b0;" />
                <a href="#SONG LINK" target="_BLANK" style="color: #999;">
                  <i class="fas fa-music-alt" /> <i class="fas fa-music" /> <i class="fas fa-music-alt" />
                </a>
              </div>
              <div class="col-md-6 pl-md-1 mb-3">
                <!------------ coding credit ----- pls leave this alone ------------------>
                <i class="fas fa-code fa-fw" style="color: #e8a4b0;" />
                <a href="/Pinky" style="color: #999;">Pinky</a>
              </div>

              <div class="col-md-6 pr-md-1 mb-3">

                <i class="fas fa-tag fa-fw" style="color: #e8a4b0;" />
                Value
              </div>
              <div class="col-md-6 pl-md-1 mb-3">

                <i class="fas fa-hands fa-fw" style="color: #e8a4b0;" />
                Obtained
              </div>

            </div>
            </div>

          </div>
      </div>
    </div>

    <div class="row no-gutters">
      <div class="col-md-6 pr-md-2 mb-3">
        <div style="background: #fff; color: #14171A; box-shadow: 0px 0px 12px rgba(0,0,0,.2); border-radius: 1em;"
        class="pt-3 px-3 h-100">
          <!----- list of likes ---------------------->
          <ul class="mb-0 list-unstyled">
            <li class="mb-3"><i class="fas fa-check fa-fw mx-1" style="color: #e8a4b0;" /> content</li>
            <li class="mb-3"><i class="fas fa-check fa-fw mx-1" style="color: #e8a4b0;" /> content</li>
            <li class="mb-3"><i class="fas fa-check fa-fw mx-1" style="color: #e8a4b0;" /> content</li>
            <li class="mb-3"><i class="fas fa-check fa-fw mx-1" style="color: #e8a4b0;" /> content</li>
          </ul>
        </div>
      </div>
      <div class="col-md-6 pl-md-2 mb-3">
        <div style="background: #fff; color: #14171A; box-shadow: 0px 0px 12px rgba(0,0,0,.2); border-radius: 1em;"
        class="pt-3 px-3 h-100">
          <!----- list of dislikes ---------------------->
          <ul class="mb-0 list-unstyled">
            <li class="mb-3"><i class="fas fa-times fa-fw mx-1" style="color: #e8a4b0;" /> content</li>
            <li class="mb-3"><i class="fas fa-times fa-fw mx-1" style="color: #e8a4b0;" /> content</li>
            <li class="mb-3"><i class="fas fa-times fa-fw mx-1" style="color: #e8a4b0;" /> content</li>
            <li class="mb-3"><i class="fas fa-times fa-fw mx-1" style="color: #e8a4b0;" /> content</li>
          </ul>
        </div>
      </div>
    </div>

    <div style="background: #fff; color: #14171A; box-shadow: 0px 0px 12px rgba(0,0,0,.2); border-radius: 1em;"
        class="p-3 mb-3 text-justify">
      <p><i class="fas fa-books fa-fw mr-1"style="color: #e8a4b0;"/>This is an open "about" section for you to write whatever you want about the character. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. Fusce quis velit vel sem pellentesque iaculis congue non lorem. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus. Sed egestas risus ut gravida blandit. In vitae nisi eu mi suscipit semper in eget justo. Sed feugiat dictum posuere. Suspendisse et accumsan leo. Phasellus mollis placerat libero, non euismod diam sodales eget. Pellentesque commodo, dolor nec tempor maximus, risus risus lobortis eros, vitae mollis felis odio vel nulla.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. Fusce quis velit vel sem pellentesque iaculis congue non lorem. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus. Sed egestas risus ut gravida blandit. In vitae nisi eu mi suscipit semper in eget justo. Sed feugiat dictum posuere. Suspendisse et accumsan leo. Phasellus mollis placerat libero, non euismod diam sodales eget. Pellentesque commodo, dolor nec tempor maximus, risus risus lobortis eros, vitae mollis felis odio vel nulla.</p>
    </div>

    <div class="row no-gutters">
      <div class="col-md-7 pr-md-2 mb-3">
        <div style="background: #fff; color: #14171A; box-shadow: 0px 0px 12px rgba(0,0,0,.2); border-radius: 1em; height: 350px; overflow:auto;" class="pt-3 px-3 pb-1">
          <!----- trivia list ---------------------->
          <ul class="mb-0 list-unstyled">
            <li class="mb-3"><i class="fas fa-star fa-fw mx-1" style="color: #e8a4b0;" /> List triva facts or notes here</li>
            <li class="mb-3"><i class="fas fa-star fa-fw mx-1" style="color: #e8a4b0;" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris.</li>
            <li class="mb-3"><i class="fas fa-star fa-fw mx-1" style="color: #e8a4b0;" /> Integer fermentum est vitae dui pretium fermentum.</li>
            <li class="mb-3"><i class="fas fa-star fa-fw mx-1" style="color: #e8a4b0;" /> Fusce quis velit vel sem pellentesque iaculis congue non lorem.</li>
            <li class="mb-3"><i class="fas fa-star fa-fw mx-1" style="color: #e8a4b0;" /> Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus.</li>
          </ul>
        </div>
      </div>
      <div class="col-md-5 pl-md-2 mb-3">
        <!----- focal image here -- will scale/crop with screen size -- focus of image is the top center ---->
          <div style="background-image: url(IMG_URL);
          background-size: cover; background-position:top center; min-height: 350px; border-radius: 1em; box-shadow: 0px 0px 12px rgba(0,0,0,.2);" class="h-100"></div>
      </div>
    </div>

    <div style="background: #fff; color: #14171A; box-shadow: 0px 0px 12px rgba(0,0,0,.2); border-radius: 1em;"
        class="pt-3 px-3 pb-1 text-justify">
      <div class="row justify-content-center">
        <!----- character -------------------------->
        <div class="col-md-4 mb-3">
          <p class="mb-1"><i class="fas fa-users fa-fw mr-1" style="color: #e8a4b0;" /> Relationship</p>
          <!---- character image here ----------------->
          <img src="IMG_URL"
          class="d-block mx-auto mb-2" style="max-height: 200px; border-radius: 1em;">
          <!---- character name here ------------------>
          <p class="text-center mb-1" style="letter-spacing: 1px;">Character Name</p>
          <!---- use number of hearts to indicate affection ---->
          <p class="text-center small mb-1">
            <i class="fas fa-heart fa-fw" />
            <i class="fas fa-heart fa-fw" />
            <i class="fas fa-heart fa-fw" />
            <i class="fas fa-heart fa-fw" />
            <i class="fas fa-heart fa-fw" />
          </p>
          <p>Replace the "relationship" on top with what type of relationship they have (friend, sibling, rival, etc). Use the number of hearts to indicate relationship strength. Write a small summary of the relationship here.</p>
        </div>

        <!----- character -------------------------->
        <div class="col-md-4 mb-3">
          <p class="mb-1"><i class="fas fa-users fa-fw mr-1" style="color: #e8a4b0;" /> Relationship</p>
          <!---- character image here ----------------->
          <img src="IMG_URL"
          class="d-block mx-auto mb-2" style="max-height: 200px; border-radius: 1em;">
          <!---- character name here ------------------>
          <p class="text-center mb-1" style="letter-spacing: 1px;">Character Name</p>
          <!---- use number of hearts to indicate affection ---->
          <p class="text-center small mb-1">
            <i class="fas fa-heart fa-fw" />
            <i class="fas fa-heart fa-fw" />
            <i class="fas fa-heart fa-fw" />
            <i class="fas fa-heart fa-fw" />
          </p>
          <p>Replace the "relationship" on top with what type of relationship they have (friend, sibling, rival, etc). Use the number of hearts to indicate relationship strength. Write a small summary of the relationship here.</p>
        </div>

        <!----- character -------------------------->
        <div class="col-md-4 mb-3">
          <p class="mb-1"><i class="fas fa-users fa-fw mr-1" style="color: #e8a4b0;" /> Relationship</p>
          <!---- character image here ----------------->
          <img src="IMG_URL"
          class="d-block mx-auto mb-2" style="max-height: 200px; border-radius: 1em;">
          <!---- character name here ------------------>
          <p class="text-center mb-1" style="letter-spacing: 1px;">Character Name</p>
          <!---- use number of hearts to indicate affection ---->
          <p class="text-center small mb-1">
            <i class="fas fa-heart fa-fw" />
            <i class="fas fa-heart fa-fw" />
            <i class="fas fa-heart fa-fw" />
          </p>
          <p>Replace the "relationship" on top with what type of relationship they have (friend, sibling, rival, etc). Use the number of hearts to indicate relationship strength. Write a small summary of the relationship here.</p>
        </div>

      </div>
    </div>
  </div>
</div>
</div>