<!--


  CREDIT: vom | vomcodesstuff | vomwastaken

  INFO:
    • Images can be whatever size, the user avatar image should probably be square but there's a seperate code for images like page dolls
    • Change progress bar widths by changing w-[#] to w-25 w-50 w-75 or w-100
    • WYSIWYG will ruin this code - don't run it through the bitch I s2g


-------------------------------


           HEADER


--------------------------- -->
<div style="height:200px;background:


  url(https://file.toyhou.se/images/15649819_jCYYFff16AoaCTb.jpg) center fixed">


</div>
<div class="row no-gutters py-1" style="line-height:1.7;margin:0 -4px">
<!-- --------------------------


           ROW ONE


--------------------------- -->
<div class="col-lg-3 row no-gutters">
  <!-- --------------------------

             MODULE 1
         about & SM links

  --------------------------- -->
  <div class="col-12 p-1">
  <div class="bg-faded p-3 h-100">
    <!-- --------------------------

                AVATAR

    --------------------------- -->
    <img src="https://file.toyhou.se/images/11555664_zrEzqO1gERNnZfQ.gif" class="fr-rounded d-block mx-auto p-2 bg-faded mb-3" style="margin-top:-125px">
    <!-- if you want a regular image like a page doll, just replace the above img line with the following: <img src="IMG HERE" class="d-block mx-auto"> -->
    <!-- --------------------------

               USERNAME

    --------------------------- -->
    <h1 class="display-4 text">SinisterStephanie</h1>
    <span class="text-muted">@SinisterStephanie</span>
    <!-- keep the @/ like it is to prevent your username from rendering as a link -->
    <!-- --------------------------

                ABOUT

    --------------------------- -->
    <div class="my-3">


      <p>Hello! I'm an aspiring artist. I plan on improving in art, animation and character design and having art as a side job, and to perhaps just be a normal pet shop worker as my main career! I don't think I'll really get too far in art, honestly. But i still definitely want to improve and make it something I can learn from.</p>


    </div>
    <!-- --------------------------

                LINKS

    --------------------------- -->
    <a class="d-block" href="https://www.deviantart.com/sinisterstephanie"><i class="fab fa-deviantart fa-fw mr-2"></i>Deviantart</a>
    <a class="d-block" href="#"><i class="fab fa-tumblr fa-fw mr-2"></i>Tumblr</a>
    <a class="d-block" href="https://www.instagram.com/sinisterstephanie/"><i class="fab fa-instagram fa-fw mr-2"></i>Instagram</a>
    <a class="d-block" href="https://twitter.com/MsSSHorror"><i class="fab fa-twitter fa-fw mr-2"></i>Twitter</a>
    <a class="d-block" href="#"><i class="fas fa-paw fa-fw mr-2"></i>Furaffinity</a>
    <a class="d-block" href="https://trello.com/b/JTGomxub/art"><i class="fas fa-link fa-fw mr-2"></i>To-Do List</a>

  </div>
  </div>
  <!-- --------------------------

             MODULE 2
            art status

  --------------------------- -->
  <div class="col-lg-12 col-sm-6 p-1">
  <div class="bg-faded p-3 h-100">
    <h1 class="display-4 text-center text-uppercase mb-3" style="font-size:1.25rem">

      Art Status

    </h1>
    <div class="text-muted">


      <span class="d-block"><i class="far fa-dollar-sign fa-fw mr-2"></i>Commissions Open</span>
      <span class="d-block"><i class="far fa-exchange fa-fw mr-2"></i>Trades Ask</span>
      <span class="d-block"><i class="far fa-tag fa-fw mr-2"></i>Requests Closed</span>


    </div>
  </div>
  </div>
  <!-- --------------------------

             MODULE 3
          design status

  --------------------------- -->
  <div class="col-lg-12 col-sm-6 p-1">
  <div class="bg-faded p-3 h-100">
    <h1 class="display-4 text-center text-uppercase mb-3" style="font-size:1.25rem">

      Design Status

    </h1>
    <div class="text-muted">


      <span class="d-block"><i class="far fa-dollar-sign fa-fw mr-2"></i>Sales Open</span>
      <span class="d-block"><i class="far fa-exchange fa-fw mr-2"></i>Trades Open</span>
      <span class="d-block"><i class="far fa-tags fa-fw mr-2"></i>Offers Open</span>

      <hr>

      <a class="d-block text-muted" href="https://toyhou.se/SinisterStephanie/characters/extagged:ForeverHomed,Pending/folder:all"><i class="far fa-folder fa-fw mr-2"></i>UFS/T</a>
      <a class="d-block text-muted" href="https://toyhou.se/SinisterStephanie/characters/extagged:ForeverHomed,Pending/folder:all"><i class="far fa-folder fa-fw mr-2"></i>Offer</a>
      <a class="d-block text-muted" href="#"><i class="far fa-heart fa-fw mr-2"></i>Wishlist</a>


    </div>
  </div>
  </div>
</div>
<!-- --------------------------


           ROW TWO


--------------------------- -->
<div class="col-lg-6 row no-gutters">
  <!-- --------------------------

             MODULE 4
              status

  --------------------------- -->
  <div class="col-12 p-1">
  <div class="bg-faded p-3 h-100">
    <div class="d-flex justify-content-between text-muted mb-3" style="font-size:1.25rem">

      <span class="font-weight-heavy text-uppercase">Status</span>
      <i class="far fa-comment fa-fw my-auto"></i>

    </div>
    <div class="card rounded-0 border-0 d-block p-3">


      <p>I honestly have no darn clue what to write here uhh,,,greetings stranger. or not stranger??? I also have a guide to my toyhou.se tags, cause it's pretty complex. here: https://sta.sh/0h1rjecv2e5 </p>


    </div>
  </div>
  </div>
  <!-- --------------------------

             MODULE 5
              to-do

  --------------------------- -->
  <div class="col-12 p-1">
  <div class="bg-faded p-3 h-100">
    <div class="d-flex justify-content-between text-muted" style="font-size:1.25rem">

      <span class="font-weight-heavy text-uppercase mb-3">To-Do</span>
      <i class="far fa-list fa-fw my-auto"></i>

    </div>
    <div class="card rounded-0 border-0 d-block p-3">
      <!-- --------------------------

                   01

      --------------------------- -->
      <div class="d-flex justify-content-between">

        <span>n/a</span> <span>i</span>

      </div>
      <div class="progress my-2 rounded-0" style="height:4px"><div class="progress-bar bg-success w-100"></div></div>
      <!-- --------------------------

                   02

      --------------------------- -->
      <div class="d-flex justify-content-between">

        <span>n/a</span> <span>already</span>

      </div>
      <div class="progress my-2 rounded-0" style="height:4px"><div class="progress-bar bg-success w-100"></div></div>
      <!-- --------------------------

                   03

      --------------------------- -->
      <div class="d-flex justify-content-between">

        <span>n/a</span> <span>have</span>

      </div>
      <div class="progress my-2 rounded-0" style="height:4px"><div class="progress-bar bg-success w-100"></div></div>
      <!-- --------------------------

                   04

      --------------------------- -->
      <div class="d-flex justify-content-between">

        <span>n/a</span> <span>a</span>

      </div>
      <div class="progress my-2 rounded-0" style="height:4px"><div class="progress-bar bg-success w-100"></div></div>
      <!-- --------------------------

                   05

      --------------------------- -->
      <div class="d-flex justify-content-between">

        <span>n/a</span> <span>list</span>

      </div>
      <div class="progress my-2 rounded-0" style="height:4px"><div class="progress-bar bg-success w-100"></div></div>

      <!-- add more above this line -->
    </div>
  </div>
  </div>
  <!-- --------------------------

             MODULE 6
            commissions

  --------------------------- -->
  <div class="col-12 p-1">
  <div class="bg-faded p-3 h-100">
    <div class="d-flex justify-content-between text-muted mb-3" style="font-size:1.25rem">

      <span class="font-weight-heavy text-uppercase">Commission Info</span>
      <i class="far fa-dollar-sign fa-fw my-auto"></i>

    </div>
    <div class="card rounded-0 border-0 d-block p-3">
      <!-- --------------------------

                  CONTACT

      --------------------------- -->
      <div class="text-uppercase" style="letter-spacing:1px;">Contact</div>
      <div class="text-muted pl-4 mb-3" style="font-size:.9rem;">

        <p>02NeonMew@gmail.com</p>
        <a href="https://www.deviantart.com/sinisterstephanie">Note via dA for a quicker response</a>

      </div>
      <!-- --------------------------

               NEED TO KNOW

      --------------------------- -->
      <div class="text-uppercase" style="letter-spacing:1px;">Need to Knows</div>
      <ul class="m-0 text-muted" style="font-size:.9rem;">

        <li>Just the basic stuff, don't claim the art as yours.</li>

      </ul>
    </div>
    <!-- --------------------------

                LISTINGS

    --------------------------- -->
    <div class="d-flex justify-content-between text-muted my-3" style="font-size:1.25rem">

      <span class="font-weight-heavy text-uppercase">Listings</span>
      <i class="far fa-list fa-fw my-auto"></i>

    </div>
      <!-- --------------------------

                   01

      --------------------------- -->
      <div class="card d-flex flex-row justify-content-between rounded-0 border-0 p-3" style="margin-bottom:2px;">
        <a href="https://sta.sh/01fz7kiqqz2q">Simple Fullbody (Feral)</a> <span>250 Points/$2.50</span>
      </div>
      <!-- --------------------------

                   02

      --------------------------- -->
      <div class="card d-flex flex-row justify-content-between rounded-0 border-0 p-3" style="margin-bottom:2px;">
        <a href="https://sta.sh/01fz7kiqqz2q">Normal Fullbody (Feral)</a> <span>500 Points/$5</span>
      </div>
      <!-- --------------------------

                   03

      --------------------------- -->
      <div class="card d-flex flex-row justify-content-between rounded-0 border-0 p-3" style="margin-bottom:2px;">
        <a href="https://sta.sh/01fz7kiqqz2q">Wiggle Icon</a> <span>200 Points/$2</span>
      </div>

    <!-- add more above this line -->
  </div>
  </div>
</div>
<!-- --------------------------


           ROW THREE


--------------------------- -->
<div class="col-lg-3 row no-gutters">
  <!-- --------------------------

             MODULE 7
            friendlist

  --------------------------- -->
  <div class="col-lg-12 col-sm-6 p-1">
  <div class="bg-faded p-3 h-100">
    <h1 class="display-4 text-center text-uppercase mb-3" style="font-size:1.25rem">

      Friends

    </h1>

    <a class="d-block text-muted" href="https://toyhou.se/EmoKiid"><i class="far fa-skull fa-fw mr-2"></i>EmoKidd</a>
    <a class="d-block text-muted" href="https://toyhou.se/choccy_mylk"><i class="far fa-star fa-fw mr-2"></i>choccy-mylk</a>
    <a class="d-block text-muted" href="https://toyhou.se/LupusHex"><i class="far fa-heart fa-fw mr-2"></i>LupusHex</a>

  </div>
  </div>
  <!-- --------------------------

             MODULE 8
              folders

  --------------------------- -->
  <div class="col-lg-12 col-sm-6 p-1">
  <div class="bg-faded p-3 h-100">
    <h1 class="display-4 text-center text-uppercase mb-3" style="font-size:1.25rem">

      Folders

    </h1>

    <a class="d-block text-muted" href="https://toyhou.se/SinisterStephanie/characters/folder:all/tagged:ForeverHomed,Human-OR-Humanoid"><i class="far fa-male fa-fw mr-2"></i>Humanoids</a>
    <a class="d-block text-muted" href="https://toyhou.se/SinisterStephanie/characters/folder:all/tagged:ForeverHomed,Anthro"><i class="far fa-paw fa-fw mr-2"></i>Anthros</a>
    <a class="d-block text-muted" href="https://toyhou.se/SinisterStephanie/characters/folder:all/tagged:ForeverHomed,Feral"><i class="far fa-star fa-fw mr-2"></i>Ferals</a>

  </div>
  </div>
  <!-- --------------------------

             MODULE 9
       featured characters

  --------------------------- -->
  <div class="col-12 p-1">
  <div class="bg-faded p-3 h-100">
    <h1 class="display-4 text-center text-uppercase mb-3" style="font-size:1.25rem">

      Featured Characters

    </h1>
    <div class="row no-gutters" style="margin:-4px">
      <!-- --------------------------

                    01

      --------------------------- -->
      <div class="col-6 p-1">
      <a class="d-flex px-3 py-2" style="text-decoration:none;height:175px;

        background: url(https://file.toyhou.se/images/13150165_YNRM82C9wpPOAUf.png) center;background-size:cover;"

        href="https://toyhou.se/3303472.paw-main-fursona-"><span class="ml-auto mt-auto text-white text-uppercase">

          Paw

        </span>
      </a>
      </div>
      <!-- --------------------------

                    02

      --------------------------- -->
      <div class="col-6 p-1">
      <a class="d-flex px-3 py-2" style="text-decoration:none;height:175px;

        background: url(https://f2.toyhou.se/file/f2-toyhou-se/images/16570396_6Dpl0MGYuyntzPJ.png) center;background-size:cover;"

        href="https://toyhou.se/2978406.hazel"><span class="ml-auto mt-auto text-white text-uppercase">

          Hazel

        </span>
      </a>
      </div>
      <!-- --------------------------

                    03

      --------------------------- -->
      <div class="col-6 p-1">
      <a class="d-flex px-3 py-2" style="text-decoration:none;height:175px;

        background: url(https://file.toyhou.se/images/13806772_Mt4Uuo0J98bGNPV.png) center;background-size:cover;"

        href="https://toyhou.se/3985728.fresia"><span class="ml-auto mt-auto text-white text-uppercase">

          Fresia

        </span>
      </a>
      </div>
      <!-- --------------------------

                    04

      --------------------------- -->
      <div class="col-6 p-1">
      <a class="d-flex px-3 py-2" style="text-decoration:none;height:175px;

        background: url(https://f2.toyhou.se/file/f2-toyhou-se/images/16399282_FlL6RNRSTljoIWq.gif) center;background-size:cover;"

        href="https://toyhou.se/3870976.tierra"><span class="ml-auto mt-auto text-white text-uppercase">

          Tierra

        </span>
      </a>
      </div>
      <!-- --------------------------

                    05

      --------------------------- -->
      <div class="col-6 p-1">
      <a class="d-flex px-3 py-2" style="text-decoration:none;height:175px;

        background: url(https://file.toyhou.se/images/15311829_oVZd5wtkEill19i.gif) center;background-size:cover;"

        href="https://toyhou.se/1758435.victor"><span class="ml-auto mt-auto text-white text-uppercase">

          Victor

        </span>
      </a>
      </div>
      <!-- --------------------------

                    06

      --------------------------- -->
      <div class="col-6 p-1">
      <a class="d-flex px-3 py-2" style="text-decoration:none;height:175px;

        background: url(https://file.toyhou.se/images/15334493_bLz22nIopieSlQW.gif) center;background-size:cover;"

        href="https://toyhou.se/2350867.emma"><span class="ml-auto mt-auto text-white text-uppercase">

          Emma

        </span>
      </a>
      </div>

      <!-- add more above this line -->
    </div>
  </div>
  </div>
</div>
</div>
<!-- CREDIT | Don't remove -->
<div class="bg-faded p-2 text-right">
  <a href="https://toyhou.se/2049911.bootleg-twitter"><i class="far fa-code fa-fw"></i></a>
</div>