Freebie - Easy

<!----
-- default highlight color is #5ab5d1
-- use find an replace to quicktly replace all hex codes
------->

<!-- WRAPPER CONTAINER -- hides the default profile title -- if you are going to combine this with CSS, remove the wrapper -->
<div class="container-fluid card border-0 py-5" style="margin-top: -58px;">
<div class="container">
<div class="card bg-faded p-2">
<div class="row no-gutters">
  <div class="col-md-4 mb-md-0 mb-2 order-md-2">
    <!-- focal image -- should be at least 650px tall -- will scale & crop with screen ------------------------->
    <div style="background-image: url('IMG_URL');
    background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 400px;" class="rounded h-100"></div>
  </div>
  <div class="col-md-8 pr-md-2 order-md-1"><div class="row no-gutters">
    <div class="col-12 mb-2">
      <div class="card card-block border-0">
        <p class="text-uppercase font-weight-bold" style="letter-spacing: 1px; font-size: 14pt; color: #5ab5d1;">
          <i class="fad fa-list-alt fa-fw" />
          Basics</p>
        <div class="row pt-2">
          <!-- BASICS STATS ------------------------------------->
        <div class="col-md-6">
            <span class="text-uppercase text-muted">Name</span>
            <span class="pull-right">content</span>
            <hr class="my-2">
        </div>

        <div class="col-md-6">
            <span class="text-uppercase text-muted">Called</span>
            <span class="pull-right">content</span>
            <hr class="my-2">
        </div>

        <div class="col-md-6">
            <span class="text-uppercase text-muted">Age</span>
            <span class="pull-right">content</span>
            <hr class="my-2">
        </div>

        <div class="col-md-6">
            <span class="text-uppercase text-muted">Gender</span>
            <span class="pull-right">content</span>
            <hr class="my-2">
        </div>

        <div class="col-md-6">
            <span class="text-uppercase text-muted">Race</span>
            <span class="pull-right">content</span>
            <hr class="my-2">
        </div>

        <div class="col-md-6">
            <span class="text-uppercase text-muted">Role</span>
            <span class="pull-right">content</span>
            <hr class="my-2">
        </div>

        <div class="col-md-6">
            <span class="text-uppercase text-muted">Demeanor</span>
            <span class="pull-right">content</span>
            <hr class="my-2 hidden-md-up">
        </div>

        <div class="col-md-6">
            <span class="text-uppercase text-muted">Theme</span>
            <!-- LINK A SONG HERE ---------------------------->
            <span class="pull-right"> <a href="SONG_LINK"
            style="color: #5ab5d1; font-weight: 600;" target="_BLANK">Song link</a></span>
        </div>
    </div>
        </div>
    </div>
    <div class="col-md-6 pr-md-1 mb-2">
      <div class="card border-0">
        <div class="card-block pb-0">
          <p class="text-uppercase font-weight-bold" style="letter-spacing: 1px; font-size: 14pt; color: #5ab5d1;">
          <i class="fad fa-heartbeat fa-fw" />
            Likes</p>
        </div>
        <!-- LIKES LIST ------------------------------->
        <div class="card-block py-1" style="height: 115px; overflow: auto;">
          <ul class="mb-0 pl-4">
            <li class="mb-1">content</li>
            <li class="mb-1">content</li>
            <li class="mb-1">content</li>
            <li class="mb-1">content</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-md-6 pl-md-1 mb-2">
      <div class="card border-0">
        <div class="card-block pb-0">
          <p class="text-uppercase font-weight-bold" style="letter-spacing: 1px; font-size: 14pt; color: #5ab5d1;">
          <i class="fad fa-skull fa-fw" />
            Dislikes</p>
        </div>
        <!-- DISLIKES LIST ------------------------------->
        <div class="card-block py-1" style="height: 115px; overflow: auto;">
          <ul class="mb-0 pl-4">
            <li class="mb-1">content</li>
            <li class="mb-1">content</li>
            <li class="mb-1">content</li>
            <li class="mb-1">content</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="card border-0">
        <div class="card-block pb-0">
          <p class="text-uppercase font-weight-bold" style="letter-spacing: 1px; font-size: 14pt; color: #5ab5d1;">
          <i class="fad fa-books fa-fw" />
            About</p>
        </div>
        <!-- ABOUT SECTION ------------------------------->
        <div class="card-block py-1" style="height: 200px; overflow: auto;">
          <p>Candy canes shortbread dessert chocolate cake chocolate cake sugar plum bonbon apple pie chocolate bar. Candy canes halvah sesame snaps croissant candy. Dragée apple pie brownie cotton candy lemon drops lemon drops candy halvah pie. Dragée jujubes cake pastry gummies marzipan apple pie lemon drops. Caramels shortbread dessert biscuit jelly beans lollipop soufflé cookie pudding. Pie fruitcake marzipan jelly beans sweet roll sugar plum bonbon. Oat cake pastry lemon drops gummies tiramisu oat cake cake muffin. Cotton candy liquorice candy soufflé jujubes lollipop sweet. Gingerbread tiramisu carrot cake liquorice tootsie roll. Halvah topping jelly sugar plum carrot cake. Chupa chups biscuit powder lollipop lollipop tootsie roll danish cupcake. </p>
        </div>
      </div>
    </div>
  </div></div>
</div>
</div>
<p class="small mt-2 text-right">HTML by @Pinky</p>
</div></div>