Freebie - User baby

<div class="container-fluid px-0 pt-md-5 pb-md-4 py-3 border-0" style="max-width: 880px;">
<h1 class="display-4 text-uppercase text-primary">
  <!--- NAME OR TITLE HERE------------------------>
  Your Name
</h1>
<div class="d-block border-0 bg-faded p-3 mb-2" style="border-radius: 1em;">
  <div class="modal-open" style="border-radius: 1em;"><div class="row no-gutters">
    <!-- side column -->
    <div class="col-md-4 mb-md-0 mb-3">
      <div class="card d-block text-center p-3 border-0 h-100">
        <!-- main icon -- use a 200 x 200 square image so it can become a square -->
        <img src="IMG_URL"
        class="d-block mx-auto rounded-circle mb-2" style="max-height: 200px;" />

        <p class="text-muted mb-0">
          age . gender . adjective</p>

          <hr class="w-75 mb-2">
          <hr class="w-75 mt-2">

        <p class="mb-0" style="font-size: 14pt;">
          <!-- social media icons -- use font awesome icons -- dont forget to fill in links -->
            <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="TWITCH_LINK" target="_BLANK"><i class="fab fa-twitch fa-fw" /></a>
            <!-- credit link -- leave this -->
            <a href="/Pinky" target="_BLANK"><i class="fas fa-code fa-fw" /></a>
        </p>
      </div>
    </div><!-- end column -->
    <!-- content column -->
    <div class="col-md-8 pl-md-3" style="font-size: 10pt;">
    <div class="tab-content">
    <!--- TAB ONE ----- about ----------------------------------->
    <div class="tab-pane active show" data-toggle="tab" id="ONE">
      <div class="card d-block pt-3 px-3 border-0"><div class="justify-content-between text-primary" style="font-size: 16pt; line-height: 1;">
       <span>About</span>
       <i class="fas fa-sparkles fa-fw" />
      </div></div>
      <div class="card d-block p-3 border-0" style="height: 300px; overflow:auto;">
        <!-- optional pagedoll image -- this will be a very small image -- just erase if you dont wanna use -->
        <img src="IMG_URL"
        class="float-md-right ml-md-2 d-block mx-auto mb-md-0 mb-3" style="max-height:260px;">

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porta condimentum luctus. Curabitur eu tortor et augue ullamcorper imperdiet et vel quam. In finibus ipsum eget consequat placerat. Suspendisse dignissim euismod sem at iaculis. Vivamus porta acccumsan justo pulvinar ultricies. Praesent quis suscipit nisl. Integer enim ex, acccumsan iaculis condimentum id, finibus a est.</p>
      </div>
    </div>
    <!--- TAB TWO ----- art ----------------------------------->
    <div class="tab-pane" data-toggle="tab" id="TWO">
      <div class="card d-block pt-3 px-3 border-0"><div class="justify-content-between text-primary" style="font-size: 16pt; line-height: 1;">
       <span>Art</span>
       <i class="fas fa-palette fa-fw" />
      </div></div>
      <div class="card d-block p-3 border-0" style="height: 300px; overflow:auto;">
        <!-- if you dont do art, just erase this tab or conver it to something else ---->
        <div class="row no-gutters mx-md-0 mx-3">
          <!-------- art status section ------------->
          <div class="col-md-6 mb-3">
              <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-3">
            <!-------- art links section ------------->
              <a href="PRICES_LINK" class="btn btn-secondary btn-block btn-sm m-1">Prices</a>
              <a href="TOS_LINK" class="btn btn-secondary btn-block btn-sm m-1">T.o.S.</a>
              <a href="EXAMPLES_LINK" class="btn btn-secondary btn-block btn-sm m-1">Examples</a>
          </div>
        </div>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porta condimentum luctus. Curabitur eu tortor et augue ullamcorper imperdiet et vel quam. In finibus ipsum eget consequat placerat. Suspendisse dignissim euismod sem at iaculis. Vivamus porta acccumsan justo pulvinar ultricies. Praesent quis suscipit nisl. Integer enim ex, acccumsan iaculis condimentum id, finibus a est.</p>
      </div>
    </div>
    <!--- TAB THREE ----- characters ----------------------------------->
    <div class="tab-pane" data-toggle="tab" id="THREE">
      <div class="card d-block pt-3 px-3 border-0"><div class="justify-content-between text-primary" style="font-size: 16pt; line-height: 1;">
       <span>Characters</span>
       <i class="fas fa-users fa-fw" />
      </div></div>
      <div class="card d-block pt-3 px-3 border-0" style="height: 300px; overflow:auto;">
        <div class="row">
         <!------------------- CHARACTER -------------------------------------->
          <div class="col-md-3 col-sm-6 text-center mb-3">
             <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17777845_Ja7J7dn53mMdWIX.png"
             class="d-block mx-auto mb-1 rounded-circle" style="max-height: 100px;">
             <a href="URL_HERE" class="small text-uppercase text-muted">Name</a>
          </div>
          <!------------------- CHARACTER -------------------------------------->
          <div class="col-md-3 col-sm-6 text-center mb-3">
             <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17777845_Ja7J7dn53mMdWIX.png"
             class="d-block mx-auto mb-1 rounded-circle" style="max-height: 100px;">
             <a href="URL_HERE" class="small text-uppercase text-muted">Name</a>
          </div>
          <!------------------- CHARACTER -------------------------------------->
          <div class="col-md-3 col-sm-6 text-center mb-3">
             <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17777845_Ja7J7dn53mMdWIX.png"
             class="d-block mx-auto mb-1 rounded-circle" style="max-height: 100px;">
             <a href="URL_HERE" class="small text-uppercase text-muted">Name</a>
          </div>
          <!------------------- CHARACTER -------------------------------------->
          <div class="col-md-3 col-sm-6 text-center mb-3">
             <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17777845_Ja7J7dn53mMdWIX.png"
             class="d-block mx-auto mb-1 rounded-circle" style="max-height: 100px;">
             <a href="URL_HERE" class="small text-uppercase text-muted">Name</a>
          </div>
          <!------------------- CHARACTER -------------------------------------->
          <div class="col-md-3 col-sm-6 text-center mb-3">
             <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17777845_Ja7J7dn53mMdWIX.png"
             class="d-block mx-auto mb-1 rounded-circle" style="max-height: 100px;">
             <a href="URL_HERE" class="small text-uppercase">Name</a>
          </div>
          <!------------------- CHARACTER -------------------------------------->
          <div class="col-md-3 col-sm-6 text-center mb-3">
             <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17777845_Ja7J7dn53mMdWIX.png"
             class="d-block mx-auto mb-1 rounded-circle" style="max-height: 100px;">
             <a href="URL_HERE" class="small text-uppercase text-muted">Name</a>
          </div>
          <!------------------- CHARACTER -------------------------------------->
          <div class="col-md-3 col-sm-6 text-center mb-3">
             <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17777845_Ja7J7dn53mMdWIX.png"
             class="d-block mx-auto mb-1 rounded-circle" style="max-height: 100px;">
             <a href="URL_HERE" class="small text-uppercase text-muted">Name</a>
          </div>
          <!------------------- CHARACTER -------------------------------------->
          <div class="col-md-3 col-sm-6 text-center mb-3">
             <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17777845_Ja7J7dn53mMdWIX.png"
             class="d-block mx-auto mb-1 rounded-circle" style="max-height: 100px;">
             <a href="URL_HERE" class="small text-uppercase text-muted">Name</a>
          </div>
       </div>
      </div>
    </div>
    </div><!-- end tab content container -->
    </div> <!-- end column -->
  </div></div>
</div>
<!-- NAV  ------------------------------------------------------>
  <ul class="nav justify-content-end text-uppercase">
  <!----------------- NAVIGATION BUTTONS -- you can change the icons -- pls note these are listed backwards -->
  <li class="nav-item pr-1">
      <a class="nav-link btn btn-outline-primary border-0 p-1" style="box-shadow:none; border-radius: .5em;" data-toggle="tab" href="#THREE">
          <i class="far fa-users fa-fw" /> <span class="hidden-sm-down">Characters</span></a>
  </li>
  <li class="nav-item px-1">
      <a class="nav-link btn btn-outline-primary border-0 p-1" style="box-shadow:none; border-radius: .5em;" data-toggle="tab" href="#TWO">
          <i class="far fa-palette fa-fw" /> <span class="hidden-sm-down">Art</span></a>
  </li>
  <li class="nav-item pl-1">
      <a class="nav-link btn btn-outline-primary border-0 p-1 active" style="box-shadow:none; border-radius: .5em;" data-toggle="tab" href="#ONE">
          <i class="far fa-sparkles fa-fw" /> <span class="hidden-sm-down">About</span></a>
  </li>
  </ul>
</div>