Freebie User Slide

<!--------- main container ------------------------------------>
<div class="container px-0 mt-4" style="max-width: 900px;">
  <!------------ card ----------------------->
  <div class="bg-faded text-center" style="box-shadow: 0px 0px 10px rgba(0,0,0,.2);">
    <div class="row no-gutters">
      <div class="col-md-4">
        <!------- focal image -- will scale and resize with screen -- focus in top center of image --------->
        <div style="background: url(IMG URL); background-repeat: no-repeat; background-size:cover; background-position: top center; min-height: 400px; " class="card-block h-100"></div>
      </div>
      <div class="col-md-8">
        <div class="card-block">

          <!-------------- name & adjectives here ------------------------>
          <h1 class="display-4" style="letter-spacing: 1.5px">
            Name Here</h1>
          <p class="text-muted small mb-3" style="letter-spacing: 2px;">
            adjective . adjective . adjective
          </p>

          <!------------ content block -- will scroll when filled -------->
          <div class="card px-3 pt-2 pb-1 text-left mb-4" style="height: 300px; overflow:auto; letter-spacin: .4px; font-size: 10pt;">
            <p>Lorem ipsum dolor sit amet, con sectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. Fusce quis velit vel sem pellentesque iaculis congue non lorem. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus. Sed egestas risus ut gravida blandit. In vitae nisi eu mi suscipit semper in eget justo. Sed feugiat dictum posuere. Suspendisse et accumsan leo.</p>

            <!----- extras ---- you can just erase this if you don't wanna use it ----------->
            <div class="row no-gutters pt-3">
            <!-------- art section ------------->
            <div class="col-md-6 mb-md-0 mb-2">
              <h4 class="text-muted text-center text-uppercase" style="font-weight: 300; letter-spacing: 2px;">
                Art <i class="fad fa-pencil-paintbrush fa-fw" />
              </h4>
                <div class="justify-content-between">
                    <span class="text-muted">
                      commissions</span>
                    <i>closed</i>
                </div>
                <hr class="my-2">
                <div class="justify-content-between">
                    <span class="text-muted">
                      trades</span>
                    <i>closed</i>
                </div>
                <hr class="my-2">
                <div class="justify-content-between">
                    <span class="text-muted">
                      requests</span>
                    <i>closed</i>
                </div>
            </div>

            <div class="col-md-6 pl-md-2 mb-2">
              <!------------ trades section ---------------------------------------------------->
              <h4 class="text-muted text-center text-uppercase" style="font-weight: 300; letter-spacing: 2px;">
                Trades <i class="fad fa-exchange fa-fw" />
              </h4>
                <a href="#LINK" class="btn btn-secondary btn-block btn-sm m-1">Trades</a>
                <a href="#LINK" class="btn btn-secondary btn-block btn-sm m-1">Sales</a>
                <a href="#LINK" class="btn btn-secondary btn-block btn-sm m-1">Wishlist</a>
            </div>
            </div>

          </div> <!--- end content block --->

          <!---- links --- use font awesome icons to change the symbols -------->
          <p>
            <a href="DA LINK" target="_BLANK" class="text-muted"><i class="fab fa-deviantart fa-fw fa-2x" /></a>
            <a href="FA LINK" target="_BLANK" class="text-muted"><i class="fas fa-paw fa-fw fa-2x" /></a>
            <a href="TWITTER LINK" target="_BLANK" class="text-muted"><i class="fab fa-twitter fa-fw fa-2x" /></a>
            <a href="TUMBLR LINK" target="_BLANK" class="text-muted"><i class="fab fa-tumblr fa-fw fa-2x" /></a>
            <a href="TWITCH LINK" target="_BLANK" class="text-muted"><i class="fab fa-twitch fa-fw fa-2x" /></a>
            <!---------- credit link ---- do not remove -------------------->
            <a href="/Pinky" target="_BLANK" title="coding credit" class="text-muted"><i class="fas fa-code fa-fw fa-2x" /></a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>