Stor8

<!-----------------------------------------------------------------
      STAR-CROSSED 
      Profile by HTMLobster (noll)
      
      
      TOS:
      Do not remove my credit. It may be edited or moved, but must be accessible on the page.
      You may edit code/frankenstein with others as long as their TOS/Rules allows.
      Turn off WYSIWYG and turn on Code Editor in settings. WYSIWYG will break the code. DO NOT USE IT AT ALL.
      Do not redistribute code. Do not redistribute edits.
      By using this code you agree to these rules.
------------------------------------------------------------------>
<div class="container" style="max-width:650px;">
  <div class="card card-outline-secondary bg-faded rounded" style="border-width:2px;">
    <div class="row no-gutters">
      <!-- Left character -->
      <div class="col-sm-auto col-6 p-2">
        <div class="heart bg-primary mt-1" style="height:110px; width:125px; clip-path:url(#heart); position:relative; z-index:1; padding:2.5px 3px 3px 3px;">
          <!-- icon -->
          <div style="height:110px; width:125px; clip-path:url(#heart2); background:url(https://i.imgur.com/5VB315r.png); background-size:cover; background-position:0 -14px;"></div>
        </div>
      </div>
      <!-- character info -->
      <div class="col-sm mx-1 bg-faded order-3 order-sm-2" style="position:relative; z-index:0;">
        <div class="py-2">
          <div class="row no-gutters justify-content-between">
            <div class="col">
              <!-- character 1 name -->
              <h1 class="mb-1 text-primary">Name 1</h1>
            </div>
            <div class="col-auto px-1">
              <!-- relationship symbol -->
              <h1 class="mb-1"><i class="fad fa-heart text-success"></i></h1>
            </div>
            <div class="col text-right">
              <!-- character 2 name -->
              <h1 class="mb-1 text-danger">Name 2</h1>
            </div>
          </div>
          <!-- relationship type -->
          <h2 class="text-center text-secondary mb-1" style="font-size:1.2em;">star-crossed lovers</h2>
          <!-- description -->
          <div class="overflow-auto text-justify" style="height:63px;">
            short info here... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum diam eget risus tristique, ac tincidunt purus lobortis. Cras nec risus id lectus varius facilisis.
          </div>
        </div>
      </div>
      <!-- Right character -->
      <div class="col-sm-auto col-6 justify-content-end p-2 order-2 order-sm-3">
        <div class="heart bg-danger mt-1" style="height:110px; width:125px; clip-path:url(#heart); position:relative; z-index:1; padding:2.5px 3px 3px 3px;">
          <!-- icon -->
          <div style="height:110px; width:125px; clip-path:url(#heart2); background:url(https://i.imgur.com/Vq08SuK.png) center; background-size:cover;"></div>
        </div>
      </div>
    </div>
  </div>
  <!-- Thoughts about character 2 -->
  <div class="row no-gutters mt-2">
    <div class="col-sm card card-outline-secondary bg-faded rounded p-2 mr-sm-2 mb-2" style="border-width:2px;">
      <!-- heading -->
      <h2 class="mb-1 badge badge-primary text-white" style="font-size:1.3em;">Thoughts About Name2</h2>
      <!-- description -->
      <div class="text-justify">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc consectetur aliquet ligula, eu finibus tortor molestie a. Duis ac pellentesque dui, non lobortis augue. Quisque tempor turpis non lacus egestas facilisis. Donec dictum hendrerit sem. Quisque semper elit nec luctus aliquam. Morbi vestibulum nunc laoreet malesuada venenatis.</p>
      </div>
    </div>
    <!-- thoughts about character 1 -->
    <div class="col-sm card card-outline-secondary bg-faded rounded p-2 mb-2" style="border-width:2px;">
      <!-- heading -->
      <h2 class="mb-1 badge badge-danger text-white" style="font-size:1.3em;">Thoughts About Name1</h2>
      <!-- description -->
      <div class="text-justify">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc consectetur aliquet ligula, eu finibus tortor molestie a. Duis ac pellentesque dui, non lobortis augue. Quisque tempor turpis non lacus egestas facilisis. Donec dictum hendrerit sem. Quisque semper elit nec luctus aliquam. Morbi vestibulum nunc laoreet malesuada venenatis.</p>
      </div>
    </div>
  </div>
  <!-- backstory -->
  <div class="card card-outline-secondary bg-faded rounded p-2" style="border-width:2px;">
    <!-- heading -->
    <h2 class="badge bg-dark text-white" style="font-size:1.3em;">Backstory</h2>
    <!-- description -->
    <div class="text-justify overflow-auto" style="max-height:189px;">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc consectetur aliquet ligula, eu finibus tortor molestie a. Duis ac pellentesque dui, non lobortis augue. Quisque tempor turpis non lacus egestas facilisis. Donec dictum hendrerit sem. Quisque semper elit nec luctus aliquam. Morbi vestibulum nunc laoreet malesuada venenatis.</p>
      <p>Nullam maximus elementum mauris eget pulvinar. Donec molestie ligula quis metus congue, ac laoreet eros ultricies. Nulla interdum fringilla mauris sit amet vehicula. Sed imperdiet lorem quis tempus tristique. Aenean consectetur ut tellus et cursus. Cras sed sem sed erat finibus iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="card card-outline-secondary bg-faded rounded p-2 justify-content-between mt-2" style="border-width:2px;">
    <div class="row no-gutters">
      <div class="col-auto"><i class="fad fa-quote-left"></i></div>
      <div class="col px-2 text-center">
        <!-- quote - can be as long as you want -->
        <h1 class="mb-0">Quote about relationship.</h1>
      </div>
      <div class="col-auto"><i class="fad fa-quote-right"></i></div>
    </div>
  </div>
  <div class="text-center mt-2">
    <a data-toggle="tooltip" title="code by noll" href="https://toyhou.se/HTMLobster"><i class="fad fa-code"></i></a>
  </div>
</div>

<!-- do not touch these -->
<svg height="0" width="0">
  <!-- Heart Clip Path -->
  <clipPath id="heart2">
    <path d="M29.9,0.4C13.5,0.4,0.3,13.6,0.3,29.9c0,7.8,3.1,14.9,8.1,20.2l51,53.5l51.8-53.9c5.1-6.2,6.9-11.5,7.5-19.8 c0-16.3-13.3-29.5-29.6-29.5C74,0.4,61.6,11.6,59.7,26.1h-0.5C57.4,11.6,44.9,0.4,29.9,0.4L29.9,0.4z"/>
  </clipPath>
</svg>
<svg height="0" width="0">
  <!-- Heart Clip Path -->
  <clipPath id="heart">
    <path d="M31.4,0.4C14.2,0.4,0.3,14.3,0.3,31.5c0,8.3,3.2,15.8,8.5,21.3l53.6,56.4l54.5-56.9c5.4-6.6,7.2-12.1,7.9-20.9 c0-17.2-13.9-31.1-31.1-31.1c-15.8,0-28.9,11.8-30.9,27.1h-0.5C60.3,12.2,47.2,0.4,31.4,0.4L31.4,0.4z"/>
  </clipPath>
</svg>