Freebie Evasion BS

<div class="container-fluid px-0 pt-2" style="max-width: 750px; font-size: 10pt; letter-spacing: .5px;">
  <div class="row no-gutters">
      <div class="col-md-4 push-md-8">
        <!-------- focal image here --------- focus will be in top center ------------->
        <div style="background-image: url('IMG_URL');

        background-repeat: no-repeat; background-position: top center; background-size: cover; min-height: 450px;"
        class="image w-100 h-100 d-flex justify-content-end bg-faded">
          <div class="col-md-3 col-2 pt-md-0 pt-3">
              <h1 style="color: #fff; font-size: 2.5em; text-shadow: 0px 0px 6px rgba(255,255,255.5);" class="p-1 text-uppercase fa-rotate-90">

                <!----- write name here -- depending on your image you may need to change the font color ----------->
                NameHere
              </h1>
          </div>
      </div>

      </div>
      <div class="pr-md-2 col-md-8 pull-md-4 p-0">
        <!---- summary box ------------->
          <div class=" bg-faded p-3 mb-2">
              <p>Write a SMALL intro here. This box does not scroll, it will grow with content so keep it precise. Just a couple of sentences will do.</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. </p>
          </div>

          <div class="row no-gutters">
            <!---- taits & likes boxes ------------->
              <div class="col-6 pr-1 mb-2">
                <div class="bg-faded h-100">
                  <h2 class="card border-0 pb-1 mb-0" style="font-weight: 300; letter-spacing: 2px;">Traits</h2>
                  <div class="px-3 py-2">
                      <ul class="list-unstyled mb-0">
                          <li class="mb-1"><i class="fal fa-plus fa-fw" /> list</li>
                          <li class="mb-1"><i class="fal fa-plus fa-fw" /> some</li>
                          <li class="mb-1"><i class="fal fa-plus fa-fw" /> personality</li>
                          <li class="mb-1"><i class="fal fa-plus fa-fw" /> traits</li>
                          <li class="mb-1"><i class="fal fa-plus fa-fw" /> here</li>
                      </ul>
                  </div>
              </div></div>


              <div class="col-6 pl-1 mb-2">
                <div class="bg-faded h-100">
                  <h2 class="card border-0 pb-1 mb-0" style="font-weight: 300; letter-spacing: 2px;">Likes</h2>
                  <div class="px-3 py-2">
                      <ul class="list-unstyled mb-0">
                          <li class="mb-1"><i class="fal fa-heart fa-fw" /> content</li>
                          <li class="mb-1"><i class="fal fa-heart fa-fw" /> content</li>
                          <li class="mb-1"><i class="fal fa-heart fa-fw" /> content</li>
                          <li class="mb-1"><i class="fal fa-heart fa-fw" /> content</li>
                          <li class="mb-1"><i class="fal fa-heart fa-fw" /> content</li>
                      </ul>
                  </div>
              </div></div>
          </div>

          <h2 style=" font-weight: 300; letter-spacing: 2px;">Facts</h2>
          <!---- facts box ------------->
          <div class=" bg-faded p-3 pb-2">
              <ul class="mb-0 pl-4">
                  <li class="mb-1"> Use this box to list facts/trivia</li>
                  <li class="mb-1"> This layout DOES NOT scroll</li>
                  <li class="mb-1"> It grows with the amount of content put in the boxes</li>
                  <li class="mb-1"> So don't put too much</li>
                  <li class="mb-1"> Or the image to the right will get ridiculously tall</li>
              </ul>
          </div>
      </div>
  </div>
</div>
<div class="container-fluid pb-2 text-right" style="max-width: 750px;letter-spacing: .5px;">
  <p class="small">HTML by @Pinky</p>
</div>