for_emberhollow

<div class="container-fluid px-0" style="max-width: 1350px; letter-spacing: .45px;">
  <div class="row">
    <!---------- left column --------------------------->
    <div class="col-lg-3 pr-lg-0 mb-3">
      <div class="card bg-faded h-100">
        <div class="card-header">
          <!----------- header -------------------------------->
          <h1 class="mb-0 text-uppercase" style="font-weight: 400; letter-spacing:1px;"><i class="fas fa-info-circle pull-right"></i> Basics</h1>
        </div>
        <div class="card-block pb-1">
          <!----------- avatar -- use a 200 x 200 image -------------------------->

          <p align="center">
            <img src="https://i.pinimg.com/564x/83/a5/ae/83a5aee0e6c4171306e7a8b1c0f1aa3b.jpg" class="d-block mx-auto mb-4 rounded-circle fr-fic fr-dib" style="max-height: 200px; max-width: 200px;" width="200" height="200">
          </p>

<!-------- stats --------------------------------------->
          <div class="row no-gutters"><div class="col-6 text-right pr-1" style="letter-spacing: 1px;"><strong> Name</strong>

            <i class="fal fa-angle-double-right fa-fw"></i></div><div class="col-6 mb-2">name here</div><div class="col-6 text-right pr-1" style="letter-spacing: 1px;"><strong> Age</strong>

            <i class="fal fa-angle-double-right fa-fw"></i></div><div class="col-6 mb-2">age</div><div class="col-6 text-right pr-1" style="letter-spacing: 1px;"><strong> Pro.</strong>

            <i class="fal fa-angle-double-right fa-fw"></i></div><div class="col-6 mb-2">she/her</div><div class="col-6 text-right pr-1" style="letter-spacing: 1px;"><strong> Height</strong>

            <i class="fal fa-angle-double-right fa-fw"></i></div><div class="col-6 mb-2">height</div><div class="col-6 text-right pr-1" style="letter-spacing: 1px;"><strong> Origin</strong>

            <i class="fal fa-angle-double-right fa-fw"></i></div><div class="col-6 mb-2">place</div><div class="col-6 text-right pr-1" style="letter-spacing: 1px;"><strong> Playlist</strong>

            <i class="fal fa-angle-double-right fa-fw"></i></div><div class="col-6 mb-2"><a href="SONG%20LINK" target="_BLANK">link ♬</a></div><div class="col-6 text-right pr-1" style="letter-spacing: 1px;"><strong> Theme</strong>

            <i class="fal fa-angle-double-right fa-fw"></i></div><div class="col-6 mb-2">♬</div><div class="col-6 text-right pr-1" style="letter-spacing: 1px;"><strong> D.O.B.</strong>

            <i class="fal fa-angle-double-right fa-fw"></i></div>
        <div class="col-6 mb-2">date</div>
        </div>
        </div>
      </div>
    </div>
<!---------- center column --------------------------->
    <div class="col-lg-6 col-md-8 mb-3">
      <div class="card bg-faded">
        <div>
          <ul class="nav nav-tabs nav-fill" style="border-bottom: none;">
            <li class="nav-item">
              <a href="#one" class="nav-link active card-header text-uppercase" data-toggle="tab" style="font-weight:400;letter-spacing:1px;font-size:1.4rem;line-height:1.1;border-bottom:1px solid;border-color:rgba(250,250,246,0.125);">
                <i class="fas fa-book pull-right"></i>
                About
              </a>
            </li>
            <li class="nav-item">
              <a href="#two" class="nav-link card-header text-uppercase" data-toggle="tab" style="font-weight:400;letter-spacing:1px;font-size:1.4rem;line-height:1.1;border-color:rgba(250,250,246,0.125);">
                <i class="fas fa-book pull-right"></i>
                About but longer than the first
              </a>
            </li>
          </ul>
        </div>
        <div class="tab-content">
          <div class="tab-pane active card-block" id="one" style="font-size: 10.5pt; height: 540px; overflow:auto;">FIRST TAB CONTENT GOES HERE</div>
          <div class="tab-pane card-block" id="two" style="font-size: 10.5pt; height: 540px; overflow:auto;">SECOND TAB CONTENT GOES HERE</div>
        </div>
      </div>
    </div>
<!---------- right column --------------------------->
    <div class="col-lg-3 col-md-4 pl-md-0 mb-3">
      <div class="card bg-faded h-100">
        <!------ FOCAL IMAGE --- will scale & crop with screen -- focus in top & center of image ----------->
        <div class="h-100" style="background-image: url(https://i.pinimg.com/564x/6f/a1/8d/6fa18d2cd6b330d5334321df6f4dfbf3.jpg); background-size: cover; background-position: top center; min-height: 400px;">
          <br>
        </div>
      </div>
    </div>
  </div>
<p class="text-right small">HTML by lowkeywicked</p>
</div>