Freebie Image

<!-- wrapper class -- to hide the profile title ---------------------------->
<div class="container-fluid card border-0 pt-5 pb-4" style="margin-top: -56px;">
<div class="container-fluid px-0" style="max-width: 1100px; font-size: 10pt;">
<!---------- content box --------------------------->
<div class="card rounded-0 bg-faded p-md-2 p-1 shadow">
  <div class="row no-gutters">
    <div class="col-12">
      <!-- title block --- set background color here ----------------------------->
      <div style="background-color: #999999; margin-bottom: 10px;" class="card p-3 rounded-0 border-0 flex-row justify-content-between text-white">
        <span class="text-uppercase fa-2x" style="letter-spacing: 2px; line-height: 1">
          <!-- title & font awesome icon here ------------------->
          Title Here</span>
        <i class="fal fa-stars fa-fw fa-2x" />
      </div>
    </div>
    <!---------- left column ------------------------->
      <div class="col-md-4 mb-md-0 mb-4">
        <!--------- focal image -- focus will be in center of image -- will scale and crop with screen -->
          <div style="background: url(IMG_URL);
          background-position: center; background-size: cover; min-height: 400px;" class="h-100"></div>
      </div>

      <!-------- center column ----------------------->
      <div class="col-md-5 px-lg-2 px-md-1 mb-md-0 mb-4">
          <div class="card pt-md-1 pt-2 pb-1 px-3 rounded-0 border-0"
          style="height: 220px; overflow:auto; margin-bottom: 10px;"><div class="w-100 my-auto">
                <!------- basic stats ---------------------->
              <div class="row no-gutters">
                  <div class="col-12">
                      <span class="text-muted text-uppercase" style="letter-spacing:1px;">Name</span>
                      <span class="pull-right">Content</span>
                      <hr class="my-1">
                  </div>

                  <div class="col-12">
                      <span class="text-muted text-uppercase" style="letter-spacing:1px;">Age</span>
                      <span class="pull-right">Content</span>
                      <hr class="my-1">
                  </div>

                  <div class="col-12">
                      <span class="text-muted text-uppercase" style="letter-spacing:1px;">Gender</span>
                      <span class="pull-right">Content</span>
                      <hr class="my-1">
                  </div>

                  <div class="col-12">
                      <span class="text-muted text-uppercase" style="letter-spacing:1px;">Race</span>
                      <span class="pull-right">Content</span>
                      <hr class="my-1">
                  </div>

                  <div class="col-12">
                      <span class="text-muted text-uppercase" style="letter-spacing:1px;">Role</span>
                      <span class="pull-right">Content</span>
                      <hr class="my-1">
                  </div>

                  <div class="col-12">
                      <span class="text-muted text-uppercase" style="letter-spacing:1px;">Demeanor</span>
                      <span class="pull-right">Content</span>
                      <hr class="my-1">
                  </div>

                  <div class="col-12">
                      <span class="text-muted text-uppercase" style="letter-spacing:1px;">Theme</span>
                      <span class="pull-right"><a href="SONG_LINK" target="_BLANK">link a song</a></span>
                  </div>
              </div>
          </div></div>

          <div class="row no-gutters">
            <div class="col-6 pr-1">
              <div class="card pt-2 px-3 rounded-0 border-0" style="height: 123px; overflow:auto; margin-bottom:10px;"><div class="mb-n2">
                  <p class="mb-2"><i class="fal fa-heart faded fa-fw"></i> Thing they like</p>
                  <p class="mb-2"><i class="fal fa-heart faded fa-fw"></i> Thing they like</p>
                  <p class="mb-2"><i class="fal fa-heart faded fa-fw"></i> Thing they like</p>
                  <p class="mb-2"><i class="fal fa-heart faded fa-fw"></i> Thing they like</p>
              </div></div>
            </div>

            <div class="col-6 pl-1">
              <div class="card pt-2 px-3 rounded-0 border-0" style="height: 123px; overflow:auto; margin-bottom:10px;"><div class="mb-n2">
                  <p class="mb-2"><i class="fal fa-skull faded fa-fw"></i> Thing they dislike</p>
                  <p class="mb-2"><i class="fal fa-skull faded fa-fw"></i> Thing they dislike</p>
                  <p class="mb-2"><i class="fal fa-skull faded fa-fw"></i> Thing they dislike</p>
                  <p class="mb-2"><i class="fal fa-skull faded fa-fw"></i> Thing they dislike</p>
              </div></div>
            </div>
          </div>

          <!---------- main content block ------------- will scroll ---------------->
          <div class="card d-block pt-3 px-3 pb-1 rounded-0 border-0" style="height: 253px; overflow:auto;">
              <p class="text-muted text-center text-uppercase mb-1" style="letter-spacing:1px;">adjective . adjective . adjective</p>
              <hr class="my-1 w-75">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna. Nulla et consectetur diam. Aliquam ipsum mi, tristique sed vestibulum ac, aliquet eget magna. Aliquam quis fringilla erat. Morbi sollicitudin id lorem eu efficitur. Mauris varius id magna vitae ullamcorper.</p>
          </div>
      </div>

      <!------- right column --------------------------->
      <div class="col-md-3">
        <!------ focal images -- focus will be in the center of image -- will scale and crop with screen size -->
          <div class="row no-gutters">
              <div class="col-md-12 mb-md-2 pr-md-0 pr-1 col-4">
                  <div style="background: url(IMG_URL);
                  background-position: center; background-size: cover; height: 200px;"></div>
              </div>

              <div class="col-md-12 mb-md-2 col-4">
                  <div style="background: url(IMG_URL);
                  background-position: center; background-size: cover; height: 200px;"></div>
              </div>

              <div class="col-md-12 pl-md-0 pl-1 col-4">
                  <div style="background: url(IMG_URL);
                  background-position: center; background-size: cover; height: 200px;"></div>
              </div>

          </div>
      </div>
  </div>
</div>
<p class="mt-2 text-right text-uppercase faded small" style="letter-spacing: 1px;">HTML by @Pinky</p>
</div>
</div>