Freebie - Soft User HTML

<!------------ main card ----------------------->
<div class="card d-block card-block text-center mt-2 mb-5">
   <h1 class="display-4 mb-2">
      <!------- name here --------------------->
      Name Here
   </h2>
   <p class="text-uppercase text-muted spaced small">
      <!------ adjectives here ------------>
      adjective . adjective . adjective
   </p>

   <hr class="w-75">

   <!------- focal image -- can be whatever size you want -- adjust max-height to make it larger ------->
   <img src="IMG_URL"
   style="max-height: 300px;" class="rounded float-md-right ml-md-2 d-block mx-auto mb-2 mt-md-n2">

   <!------ content here --- card will grow with content -------->
   <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>

   <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>

   <hr class="w-75">
   <!---- links --- use font awesome icons to change the symbols -- please actually fill in the links or just erase them if you're not gonna use ------>
   <p style="font-size: 1.5em;">
      <a href="DA_LINK" target="_BLANK"><i class="fab fa-deviantart fa-fw" /></a>
      <a href="FA_LINK" target="_BLANK"><i class="fas fa-paw fa-fw" /></a>
      <a href="TWITTER_LINK" target="_BLANK"><i class="fab fa-twitter fa-fw " /></a>
      <a href="TUMBLR_LINK" target="_BLANK"><i class="fab fa-tumblr fa-fw" /></a>
      <a href="/Pinky" target="_BLANK" title="coding credit"><i class="far fa-code fa-fw" /></a>
   </p>
</div>

<!------------ commissions card ----------------------->
<div class="card card-block text-center mb-5">
   <h1 class="mb-4">Commissions</h2>
   <div class="row">

     <!-------- links ------------->
      <div class="col-md-6 mb-3">
         <a href="LINK_HERE" class="btn btn-default btn-block btn-sm m-1">T.o.S.</a>
         <a href="LINK_HERE" class="btn btn-default btn-block btn-sm m-1">Prices</a>
         <a href="LINK_HERE" class="btn btn-default btn-block btn-sm m-1">Queue</a>
      </div>

      <!-------- status ------------->
      <div class="col-md-6 mb-3">
         <div class="justify-content-between">
            <b class="faded">commissions</b>
            <span>closed</span>
         </div>
         <hr class="my-2">
         <div class="justify-content-between">
            <b class="faded">trades</b>
            <span>closed</span>
         </div>
         <hr class="my-2">
         <div class="justify-content-between">
            <b class="faded">requests</b>
            <span>closed</span>
         </div>
      </div>

   </div>

   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius libero non sem dapibus, eget viverra nisl sagittis.</p>
</div>

<!------------ featured card ----------------------->
<div class="card card-block pb-2 text-center mb-5">
   <h1 class="mb-4">Featured</h2>
   <div class="row">

     <!----- character ------------->
      <div class="col-md-4 mb-3">
         <img src="IMG_URL"
         class="img-thumbnail d-block mx-auto mb-2" style="max-height: 200px;">
         <a href="LINK_HERE" class="btn btn-outline-secondary">
           Name</a>
      </div>
       <!----- character ------------->
      <div class="col-md-4 mb-3">
         <img src="IMG_URL"
         class="img-thumbnail d-block mx-auto mb-2" style="max-height: 200px;">
         <a href="LINK_HERE" class="btn btn-outline-secondary">
           Name</a>
      </div>
       <!----- character ------------->
      <div class="col-md-4 mb-3">
         <img src="IMG_URL"
         class="img-thumbnail d-block mx-auto mb-2" style="max-height: 200px;">
         <a href="LINK_HERE" class="btn btn-outline-secondary">
           Name</a>
      </div>

   </div>
</div>

<!------------ friends card ----------------------->
<div class="card card-block text-center mb-5">
   <h1 class="mb-4">Friends</h2>
   <!---- you can add or remove buttons - just follow the format -->
   <p>
      <a href="LINK_HERE" class="btn btn-outline-secondary m-1">Name</a>
      <a href="LINK_HERE" class="btn btn-outline-secondary m-1">Name</a>
      <a href="LINK_HERE" class="btn btn-outline-secondary m-1">Name</a>
      <a href="LINK_HERE" class="btn btn-outline-secondary m-1">Name</a>
      <a href="LINK_HERE" class="btn btn-outline-secondary m-1">Name</a>
      <a href="LINK_HERE" class="btn btn-outline-secondary m-1">Name</a>
      <a href="LINK_HERE" class="btn btn-outline-secondary m-1">Name</a>
      <a href="LINK_HERE" class="btn btn-outline-secondary m-1">Name</a>
   </p>
</div>