Freebie Simple Char HTML

<!------- DO NOT USE THE WYSIWYG EDITOR
I'M NOT ASING THIS FOR FUN, SERIOUSLY TURN THAT THING OFF
---------->

<div class="card p-md-3 p-4 mb-4">
<div class="row no-gutters">

    <div class="col-lg-4 push-lg-8 pl-lg-2 mb-lg-0 mb-3">
          <!------ TOP FOCAL IMAGE -- will crop and scale with screen -- focus will be in top center of image --->
            <div style="background-image:url(IMG_URL);"
            class="h-100 focalImg">
        </div>

    </div>
    <div class="col-lg-8 pull-lg-4 pr-lg-1">
        <div class="p-md-1">

          <!----------- NAME & ADJECTIVES ------------>
            <h2 class="text-center">
              adjective . adjective . adjective</h2>
            <hr class="w-75">
            <div class="card">
            <div class="card-block pb-2 bg-faded">
            <!-------- BASIC STATS ------------------->
            <div class="row no-gutters">
                <div class="col-md-6 pr-md-1">
                  <dl class="row no-gutters fields-field">
                    <dt class="field-title col-4">Name</dt>
                    <dd class="fields-value col-8">Content</dt>
                    </dl>
                </div>

                <div class="col-md-6 pl-md-1">
                  <dl class="row no-gutters fields-field">
                    <dt class="field-title col-4">Called</dt>
                    <dd class="fields-value col-8">Content</dt>
                    </dl>
                </div>

                <div class="col-md-6 pr-md-1">
                  <dl class="row no-gutters fields-field">
                    <dt class="field-title col-4">Age</dt>
                    <dd class="fields-value col-8">Content</dt>
                    </dl>
                </div>

                <div class="col-md-6 pl-md-1">
                  <dl class="row no-gutters fields-field">
                    <dt class="field-title col-4">DoB</dt>
                    <dd class="fields-value col-8">Content</dt>
                    </dl>
                </div>

                <div class="col-md-6 pr-md-1">
                  <dl class="row no-gutters fields-field">
                    <dt class="field-title col-4">Gender</dt>
                    <dd class="fields-value col-8">Content</dt>
                    </dl>
                </div>

                <div class="col-md-6 pl-md-1">
                  <dl class="row no-gutters fields-field">
                    <dt class="field-title col-4">Pronouns</dt>
                    <dd class="fields-value col-8">Content</dt>
                    </dl>
                </div>

                <div class="col-md-6 pr-md-1">
                  <dl class="row no-gutters fields-field">
                    <dt class="field-title col-4">Height</dt>
                    <dd class="fields-value col-8">content</dt>
                    </dl>
                </div>

                <div class="col-md-6 pl-md-1">
                  <dl class="row no-gutters fields-field">
                    <dt class="field-title col-4">Build</dt>
                    <dd class="fields-value col-8">Content</dt>
                    </dl>
                </div>

                <div class="col-md-6 pr-md-1">
                  <dl class="row no-gutters fields-field">
                    <dt class="field-title col-4">Race</dt>
                    <dd class="fields-value col-8">(or species)</dt>
                    </dl>
                </div>

                <div class="col-md-6 pl-md-1">
                  <dl class="row no-gutters fields-field">
                    <dt class="field-title col-4">Role</dt>
                    <dd class="fields-value col-8">Content</dt>
                    </dl>
                </div>

                <div class="col-md-6 pr-md-1">
                  <dl class="row no-gutters fields-field">
                    <dt class="field-title col-4">Demeanor</dt>
                    <dd class="fields-value col-8">Content</dt>
                    </dl>
                </div>

                <div class="col-md-6 pl-md-1">
                  <dl class="row no-gutters fields-field">
                    <dt class="field-title col-4">MBTI</dt>
                    <dd class="fields-value col-8">Content</dt>
                    </dl>
                </div>

                <div class="col-md-6 pr-md-1">
                  <dl class="row no-gutters fields-field">
                    <dt class="field-title col-4">HTML</dt>
                    <dd class="fields-value col-8">@Pinky</dt>
                    </dl>
                </div>

                <div class="col-md-6 pl-md-1">
                  <dl class="row no-gutters fields-field">
                    <dt class="field-title col-4">Theme</dt>
                     <dd class="fields-value col-8">
                       <!-- LINK A YOUTUBE VIDEO HERE ----------------------->
                       <a href="SONG_LINK" target="_BLANK">song link</a>
                      </dt>
                    </dl>
                </div>

            </div></div>

            </div>

            <hr class="w-75">
            <!---- swatches -- change hex codes to match your character's palette -->
            <div class="rounded overflow-hidden mt-2"><div class="row no-gutters">
                <div style="background-color: #222;" class="col swatch">
                </div>
                <div style="background-color: #333;" class="col swatch">
                </div>
                <div style="background-color: #444;" class="col swatch">
                </div>
                <div style="background-color: #666;" class="col swatch">
                </div>
                <div style="background-color: #888;" class="col swatch">
                </div>
                <div style="background-color: #999;" class="col swatch">
                </div>
            </div></div>
        </div>
    </div>
  </div>
</div>

<div class="card d-block p-md-3 p-4 mb-4">
  <h2>About</h2>
  <hr class="mt-0">
  <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. Etiam sed libero laoreet ipsum lacinia sagittis eu non lectus. Fusce sit amet lectus nec massa auctor aliquam et molestie metus. Sed at est in ante egestas iaculis. Nullam varius gravida ligula nec malesuada.</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. Etiam sed libero laoreet ipsum lacinia sagittis eu non lectus. Fusce sit amet lectus nec massa auctor aliquam et molestie metus. Sed at est in ante egestas iaculis. Nullam varius gravida ligula nec malesuada.</p>
</div>

<div class="card d-block px-md-3 pt-md-3 px-4 pt-4 mb-4">
  <h2>Links</h2>
  <hr class="mt-0">
  <div class="row">
    <div class="col-md-4 mb-4 text-center">
      <img src="IMG_URL"
      class="d-block mx-auto mb-3 rounded" style="max-height: 200px;">
      <p><a href="CHARACTER_LINK" class="btn btn-outline-primary mb-1">Name</a>
      <br><i class="text-muted">relationship</i></p>
      <p>Write some content here if you like</p>
    </div>

    <div class="col-md-4 mb-4 text-center">
      <img src="IMG_URL"
      class="d-block mx-auto mb-3 rounded" style="max-height: 200px;">
      <p><a href="CHARACTER_LINK" class="btn btn-outline-primary mb-1">Name</a>
      <br><i class="text-muted">relationship</i></p>
      <p>Write some content here if you like</p>
    </div>

    <div class="col-md-4 mb-4 text-center">
      <img src="IMG_URL"
      class="d-block mx-auto mb-3 rounded" style="max-height: 200px;">
      <p><a href="CHARACTER_LINK" class="btn btn-outline-primary mb-1">Name</a>
      <br><i class="text-muted">relationship</i></p>
      <p>Write some content here if you like</p>
    </div>
  </div>
</div>