Freebie - User Screen

<div class="container p-0 my-5" style="max-width: 900px; font-family: helvetica;">
  <div class="row no-gutters">
    <div class="col-md-5 push-md-7 pl-md-2">
      <!-- page doll here -- will resize to fit space & center itself --------------->
      <div style="background-image: url('IMG_URL');
      background-size: contain; background-position: center; background-repeat: no-repeat; min-height: 400px;" class="h-100"></div>
    </div>
    <div class="col-md-7 pull-md-5"><div class="card border-0 bg-faded p-2" style="border-radius: 16px;">
      <div class="card border-0 p-2" style="border-radius: 16px;"><div class="card border-0 bg-faded p-2" style="border-radius: 16px;">
      <div class="card border-0 p-3 text-center" style="border-radius: 16px 16px 0px 0px;">
        <h1 class="text-primary text-uppercase mb-1" style="font-size: 2em; letter-spacing: 1px;">
        <!-- title & adjectives here ---------------->
          Your Name
        </h1><p class="text-primary faded small mb-0" style="font-weight: 600; letter-spacing: 1px;">
          adjective . adjective . adjective
        </p>
      </div>
      <div class="card d-block border-0 rounded-0 px-3 pt-3 pb-1 text-center" style="font-size: 10pt; letter-spacing: .45px; height: 225px; overflow: auto;">
        <!-- write about yourself here ------------------->
        <p>this is a cool little box for you to write about yourself... nice. This area will scroll.</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.</p>

      </div>
      <div class="card border-0 flex-row p-3 justify-content-around" style="border-radius: 0px 0px 16px 16px; font-size: 1.25em;">
        <!-- links here -- use font awesome icons to update the icons ------------------->
        <a href="LINK_HERE" target="_BLANK">
          <i class="fab fa-twitter fa-fw" />
        </a>
        <a href="LINK_HERE" target="_BLANK">
          <i class="fab fa-deviantart fa-fw" />
        </a>
        <a href="LINK_HERE" target="_BLANK">
          <i class="fab fa-tumblr fa-fw" />
        </a>
        <a href="LINK_HERE" target="_BLANK">
          <i class="fab fa-twitch fa-fw" />
        </a>
        <!-- image credit -- for our pagedoll --->
        <a href="IMAGE_CREDIT" target="_BLANK">
          <i class="fas fa-image fa-fw" />
        </a>
        <!-- coding credit -- leave this --->
        <a href="/Pinky" target="_BLANK">
          <i class="fas fa-code fa-fw" />
        </a>
      </div>
    </div>
  </div>
</div></div>
</div></div>