Simple Th Code

<!--       CODE CREDIT TO: ALYULINA        -->
<!--    PLEASE DON'T REMOVE THE CREDITS    -->
<!--                                       -->
<!--  You can edit this code, but you are  -->
<!--     not allowed to distribute it      -->

<div class="container  pt-3 pb-3" style="max-width:800px;">

  <!-- LEFT -->
  <div class="row no-gutters">

    <div class="col-lg-3 ">

      <!--                  CHARACTER IMAGE                     -->
      <!-- you need follow this -> (&quot;URL?1538281948&quot;) -->
      <!--   make sure the character is centered on the image   -->

      <div class="mx-auto card card-outline-primary" style="height:160px; width:160px;

      background:url(&quot;https://data.whicdn.com/images/341983737/original.jpg?1538281948&quot;)

      center;background-size:cover;"></div>

      <div class="bg-faded mt-1 ml-2 mr-2 pr-5 pl-5  justify-content-between">
        <!-- put your url page replacing the # -->
        <a href="#" data-toggle="tooltip" data-original-title="" title="Character Owner"><i class="fal fa-user"></i></a>
        <!-- don't remove -->
        <a href="https://toyhou.se/Dakufurawa02" data-toggle="tooltip" data-original-title="" title="Coder"><i class="fal fa-code"></i></a>
      </div>

    </div>

    <!-- RIGHT -->
    <div class="col-lg-9 card card-outline-primary bg-faded">

      <!--             CHARACTER NAME            -->

      <span class="text-center text-uppercase mt-1 text-primary" style="font-family: fantasy; font-size: xx-large; text-decoration: underline;">

        Character Name

      </span>

      <!--             CHARACTER INFO            -->
      <div class="row no-gutters mt-2 mb-2 pl-4 pr-4 justify-content-between">
        <div class="col-sm-5">
          <div class="d-flex">
            <span class="w-50 p-1">Gender</span>
            <span class="w-50 p-1 text-right text-muted">[info]</span>
          </div>
          <div class="d-flex">
            <span class="w-50 p-1">Pronouns</span>
            <span class="w-50 p-1 text-right text-muted">[info]</span>
          </div>
          <div class="d-flex">
            <span class="w-50 p-1">Age</span>
            <span class="w-50 p-1 text-right text-muted">[info]</span>
          </div>
          <div class="d-flex">
            <span class="w-50 p-1">Birth</span>
            <span class="w-50 p-1 text-right text-muted">[info]</span>
          </div>
        </div>

        <div class="col-sm-5">
          <div class="d-flex">
            <span class="w-50 p-1">Specie</span>
            <span class="w-50 p-1 text-right text-muted">[info]</span>
          </div>
          <div class="d-flex">
            <span class="w-50 p-1">Orientation</span>
            <span class="w-50 p-1 text-right text-muted">[info]</span>
          </div>
          <div class="d-flex">
            <span class="w-50 p-1">Height</span>
            <span class="w-50 p-1 text-right text-muted">[info]</span>
          </div>
          <div class="d-flex">
            <span class="w-50 p-1">Status</span>
            <span class="w-50 p-1 text-right text-muted">[info]</span>
          </div>

        </div>

      </div>

    </div>

  </div>

</div>