Freebie - User Axis

<div class="container px-0 mt-md-5 mt-4 mb-4">
<!---------------- TOP BANNER -------- CHOOSE A SEAMLESS PATTERN ---------------------------------------------->
<div class="card border-0 modal-open bg-faded" style="border-radius: 1em; box-shadow: 0px 0px 16px rgba(0,0,0,.2);">
  <div style="background: url(https://f2.toyhou.se/file/f2-toyhou-se/images/17754682_KzxTJ64ezcTNU60.png) fixed;
  height: 180px;"class="card-block" ></div>

<div class="row no-gutters">
  <!--------- left section -------- name and links ------------>
   <div class="col-md-3">
      <div class="card card-block d-block bg-faded border-0 rounded-0">

        <!---------------- 200 x 200 AVATAR IMAGE ---------------------------------------------->
         <img src="https://file.toyhou.se/images/12877178_CxZY12gwPKzZXBB.png"
         class="bg-faded p-2 rounded-circle d-block mx-auto mb-2" style="max-height: 200px; margin-top: -100px;">

         <!-------- NAME & FOCAL ADJECTIVES ----------------------------------------->
         <div class="text-lg-left text-center">
            <h1 class="display-4 text-muted mb-0">
              Name here
            </h1>
            <p class="ml-lg-2 mb-4" style="letter-spacing: .5px;">
              age . gender . adj
            </p>
         </div>
              <!---------------- SOCIAL MEDIA LINKS -- LEAVE CREDIT -- USE FONT AWESOM ICONS ----------->
               <p class="text-uppercase text-muted mb-0" style="letter-spacing: 1px;"><i class="fal fa-link fa-fw" /> Links</p>
               <hr class="mt-0">
               <div style="letter-spacing:1px;">
               <a href="LINK_HERE" class="d-block mb-2" target="_BLANK">
                 <i class="fab fa-deviantart fa-fw pull-right" /> Deviantart</a>

               <a href="LINK_HERE" class="d-block mb-2" target="_BLANK">
                 <i class="fas fa-paw fa-fw pull-right" /> Furaffinity</a>

               <a href="LINK_HERE" class="d-block mb-2" target="_BLANK">
                 <i class="fab fa-twitter fa-fw pull-right" /> Twitter</a>

               <a href="LINK_HERE" class="d-block mb-2" target="_BLANK">
                 <i class="fab fa-tumblr fa-fw pull-right" /> Tumblr</a>

               <a href="#" class="d-block mb-2" target="_BLANK">
                 <i class="fab fa-discord fa-fw pull-right" /> ###name</a>

               <a href="/Pinky" class="d-block mb-2" target="_BLANK">
                 <i class="fas fa-code fa-fw pull-right" /> Credit</a>
              </div>
      </div>
   </div>
   <div class="col-lg-7 col-md-6 px-md-1 px-3">
     <!-- main content area ------------------------------------------------------------->
       <div class="card d-block p-3 my-md-3" style="height: 500px; overflow:auto; border-radius: 1em; font-size: 10pt;">
         <h1 class="text-muted text-uppercase" style="letter-spacing: 1px; font-weight:300;">
          <i class="fal fa-stars fa-fw" /> About Me</h1>
         <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. In gravida libero consectetur, lobortis nisl sit amet, pellentesque ligula. Suspendisse tincidunt feugiat posuere. </p>

          <!----- extras ---- you can just erase this if you don't wanna use it ----------->
          <div class="row no-gutters mx-md-0 mx-3">
          <!-------- art section ------------->
          <div class="col-md-6 pr-md-2 mb-2">
            <h1 class="text-muted text-uppercase mt-4" style="letter-spacing: 1px; font-weight:300;">
              <i class="fal fa-pencil-paintbrush fa-fw" /> Art</h1>
              <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 ---------------------------------------------------->
              <h1 class="text-muted text-uppercase mt-4" style="letter-spacing: 1px; font-weight:300;">
                <i class="fal fa-exchange fa-fw" /> Trades</h1>
                <a href="LINK_HERE" class="btn btn-secondary btn-block btn-sm m-1">Trades</a>
                <a href="LINK_HERE" class="btn btn-secondary btn-block btn-sm m-1">Sales</a>
                <a href="LINK_HERE" class="btn btn-secondary btn-block btn-sm m-1">Wishlist</a>
            </div>
          </div><!---- end extras ----------->

          <h1 class="text-muted text-uppercase mt-4" style="letter-spacing: 1px; font-weight:300;">
          <i class="fal fa-list-alt fa-fw" /> Notice</h1>
          <ul>
            <li>write some notes here</li>
            <li>notes</li>
            <li>more notes?</li>
          </ul>

         </div>
   </div>
   <!--------- right section -------- featured characters ------------>
   <div class="col-lg-2 col-md-3">
      <div class="h-100 d-flex flex-md-column justify-content-between py-3">
        <!-- featured characters -- fill in name, icon & link ------------------------------------------------>
        <div class="mx-md-0 mx-1 col-md-auto col">
          <a href="CHARACTER_LINK" target="_BLANK">
           <img title="character name"
           src="https://f2.toyhou.se/file/f2-toyhou-se/images/17953750_znO8ZLtC616lig9.png"
           class="d-block mx-auto img-thumbnail tooltipster"
           style="max-height: 150px; border-radius: 1em;">
         </a>
        </div>

        <div class="mx-md-0 mx-1 col-md-auto col">
          <a href="CHARACTER_LINK" target="_BLANK">
           <img title="character name"
           src="https://f2.toyhou.se/file/f2-toyhou-se/images/17953750_znO8ZLtC616lig9.png"
           class="d-block mx-auto img-thumbnail tooltipster"
           style="max-height: 150px; border-radius: 1em;">
         </a>
        </div>

        <div class="mx-md-0 mx-1 col-md-auto col">
          <a href="CHARACTER_LINK" target="_BLANK">
           <img title="character name"
           src="https://f2.toyhou.se/file/f2-toyhou-se/images/17953750_znO8ZLtC616lig9.png"
           class="d-block mx-auto img-thumbnail tooltipster"
           style="max-height: 150px; border-radius: 1em;">
         </a>
        </div>

      </div>
   </div>
</div>
</div>
</div>