Freebie Split

<div class="container">
  <div class="p-1 bg-dark">
    <div class="row no-gutters">

      <!----- left column ----------------->
      <div class="col-lg-3 col-md-5 bg-dark">
        <div class="pt-3 px-4 pb-1 text-light">
          <div class="text-center mb-3">

            <span class="fa-stack fa-3x">
            <i class="fal fa-circle fa-stack-2x"></i>
            <!----- update this font awesome icon to change the top symbol ----->
            <i class="fas fa-crown fa-stack-1x"></i>
            </span>

            <!----- name & adjectives here ---------->
            <h1 class="display-4" style="letter-spacing:1px;">Name Here</h1>
            <p class="small" style="letter-spacing:1px;">adjective . adjective . adjective</p>
          </div>

          <!------ stats list here ------------------->
          <div class="d-flex justify-content-between mb-2">
            <b style="letter-spacing:1px;">Gender</b> content
          </div>
          <div class="d-flex justify-content-between mb-2">
            <b style="letter-spacing:1px;">Age</b> content
          </div>
          <div class="d-flex justify-content-between mb-2">
            <b style="letter-spacing:1px;">Sign</b> content
          </div>
          <div class="d-flex justify-content-between mb-2">
            <b style="letter-spacing:1px;">Height</b> content
          </div>
          <div class="d-flex justify-content-between mb-2">
            <b style="letter-spacing:1px;">Build</b> content
          </div>
          <div class="d-flex justify-content-between mb-2">
            <b style="letter-spacing:1px;">Race</b> content
          </div>
          <div class="d-flex justify-content-between mb-2">
            <b style="letter-spacing:1px;">Role</b> content
          </div>
          <div class="d-flex justify-content-between mb-2">
            <b style="letter-spacing:1px;">MBTI</b> content
          </div>
          <div class="d-flex justify-content-between mb-2">
            <b style="letter-spacing:1px;">Theme</b> <a href="SONG LINK" target="_BLANK" class="text-muted">song link</a>
          </div>
        </div>
      </div>

      <!----- center column ----------------->
      <div class="col-lg-5 col-md-7">
        <div class="card rounded-0 border-0 pt-3 px-3 pb-1" style="height: 450px; overflow:auto; font-size: .95em; letter-spacing: .4px;">
          <p class="text-muted text-center" style="font-size: 1.1em; letter-spacing: 1.5px;"><i>Write a quote or tagline here...</i></p>

          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius libero non sem dapibus, eget viverra nisl sagittis. Ut interdum mi non sagittis euismod. Suspendisse id venenatis massa. Aliquam ornare, nibh sit amet interdum elementum, leo sem laoreet nibh, at sollicitudin diam ipsum eu risus. Aenean gravida eu nibh id tincidunt. Pellentesque lorem mauris, cursus sed ligula eget, cursus posuere risus. Phasellus vel enim volutpat, sagittis augue at, condimentum ex.</p>


          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius libero non sem dapibus, eget viverra nisl sagittis. Ut interdum mi non sagittis euismod. Suspendisse id venenatis massa. Aliquam ornare, nibh sit amet interdum elementum, leo sem laoreet nibh, at sollicitudin diam ipsum eu risus. Aenean gravida eu nibh id tincidunt. Pellentesque lorem mauris, cursus sed ligula eget, cursus posuere risus. Phasellus vel enim volutpat, sagittis augue at, condimentum ex.</p>
        </div>
      </div>

      <!----- right column ----------------->
      <div class="col-lg-4 bg-faded">
        <!-------- FOCAL IMAGE -- WILL SCALE & CROP WITH SCREEN -- FOCUS IN TOP CENTER ------------------>
          <div style="background-image:url(IMG URL);
          background-size: cover; repeat:no-repeat; background-position: top center; min-height: 420px;" class="card-block bg-faded h-100"></div>
      </div>

    </div>
  </div>
  <!----- please leave credit ---------------->
  <p class="small text-right mt-2">HTML by @Pinky</p>
</div>