Freebie Evasion

<!------------
---- Color chaning tip: use find & replace to quickly replace all hex codes
----
---- Background color: #222
---- Content box color: #444
---- Font color: #fff
--------------->

<div class="container-fluid px-0 pt-2" style="max-width: 775px; font-size: 10pt; letter-spacing: .5px;">
  <div class="p-md-3 p-2" style="background: #222; color: #fff;">
    <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; background-color: #444; min-height: 450px;"
          class="image w-100 h-100 d-flex justify-content-end">
            <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-3 col-md-8 pull-md-4 p-0">
          <!---- summary box ------------->
            <div style="background: #444;" class="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 style="background: #444;" class="h-100">
                    <h2 class="pb-1 mb-0" style="background: #222; 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 style="background: #444;" class="h-100">
                    <h2 class="pb-1 mb-0" style="background: #222; 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 style="background: #444;" class="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>
<div class="container-fluid pb-2 text-right" style="max-width: 775px;letter-spacing: .5px;">
  <p class="small">HTML by @Pinky</p>
</div>