compact

<!---

  ========================================================

  code by Lullah
  colors used:
    > BOOTSTRAP
      > bg-danger (warning box)
      > text-light (warning box)
      > bg-faded (profile content box)
      > btn-default (character links)

  You may...
    > Edit this code to oblivion!
    > Recycle parts for your own use!

  You may not...
    > Remove my watermark!

  ========================================================

--->

<div class="container" style="max-width:660px;font-size:0.9em;">
  <div class="p-2">
  <div class="card">

    <div class="row no-gutters">

    <div class="col-md-5">
      <div class="d-flex bg-faded rounded px-3" style="height:100%;width:100%;min-height:300px;">
      <!---- ICON ---->
      <div class="m-auto"><div class="rounded-circle" style="height:190px;width:190px;

      background-image:url(https://via.placeholder.com/190);

      background-size:cover;background-position:center;"></div>
      <!--- SUBTEXT u can delete this --->
      <div class="text-center mt-1" style="font-weight:lighter;">
        Name. Pronouns. Age</div>
      </div>
    </div></div>

    <div class="col-md-7" style="min-height:300px;">
    <div class="p-3">

      <!---- WARNING BOX ---->
      <div class="card bg-danger">
        <div class="justify-content-between px-3 py-2 text-light">
          <div class="m-auto"><i class="fas fa-exclamation-triangle fa-2x"></i></div>
          <!---- WARNING BOX CONTENT ---->
          <div class="px-3 text-center">
            Please don't offer on characters unless they are marked as being up for offers/sale/trade.</div>
          <div class="m-auto"><i class="fas fa-exclamation-triangle fa-2x"></i></div>
      </div></div>

      <!---- COMMISSION ---->
      <!---- please remove the # ! it's only there so that the default link doesn't link to the toyhouse user whose name is URL lol ---->
      <div class="mt-2 text-muted text-uppercase justify-content-between">
        <div><i class="mr-1 fas fa-dollar-sign"></i>Commissions</div>
        <div><a href="#URL">Info</a></div>
      </div><div><hr class="my-1"></div>

      <!---- ART TRADES ---->
      <div class="mt-1 text-muted text-uppercase justify-content-between">
        <div><i class="mr-1 fad fa-exchange-alt"></i>Art trades</div>
        <div>Info</div>
      </div><div><hr class="my-1"></div>

      <!---- OC SALE/TRADE ---->
      <!---- please remove the # ! ---->
      <div class="mt-1 text-muted text-uppercase justify-content-between">
        <div><i class="mr-1 fas fa-hands-heart"></i>OC sale/trade</div>
        <div><a href="#URL">Info</a></div>
      </div><div><hr class="my-1"></div>

      <!---- PROFILE DESCRIPTION OR CONTENT ---->
      <div class="mt-2">
        Note that even though this box expands when you write into it, some of the text might get blocked by the link bar! The icon will scale with the new box height so don't worry about it!</div>

      <!---- LINK BAR ---->
      <div class="bg-faded rounded px-4 py-2" style="position:absolute;bottom:0px;right:0px;">
        <div class="justify-content-between" style="font-size:0.85em;">
          <!---- LINKS ---->
          <!---- please remove the # ! ---->
          <a class="pr-3" href="#URL"><i class="fab fa-twitter fa-lg"></i></a>
          <a class="pr-3" href="#URL"><i class="fab fa-instagram fa-lg"></i></a>
          <a class="pr-3" href="#URL"><i class="fab fa-deviantart fa-lg"></i></a>
          <a class="pr-3" href="#URL"><i class="fas fa-globe fa-lg"></i></a>
          <!---- ADD MORE ABOVE HERE!!! DON'T REMOVE MY WATERMARK! ---->
          <a class="" href="https://toyhou.se/Lullah"><i class="fas fa-code fa-lg"></i></a>
      </div></div>

        </div>

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

<div class="">
  <div class="row no-gutters">
    <!---- CHAR ---->
    <div class="col-3 p-2"><div class="rounded" style="height:140px;

    background-image:url(https://via.placeholder.com/140);

    background-size:cover;background-position:center;"></div><a class="btn btn-default mt-2 p-1 w-100"
    href="#URL">Name</a></div>

    <!---- CHAR ---->
    <div class="col-3 p-2"><div class="rounded" style="height:140px;

    background-image:url(https://via.placeholder.com/140);

    background-size:cover;background-position:center;"></div><a class="btn btn-default mt-2 p-1 w-100"
    href="#URL">Name</a></div>

    <!---- CHAR ---->
    <div class="col-3 p-2"><div class="rounded" style="height:140px;

    background-image:url(https://via.placeholder.com/140);

    background-size:cover;background-position:center;"></div><a class="btn btn-default mt-2 p-1 w-100"
    href="#URL">Name</a></div>

    <!---- CHAR ---->
    <div class="col-3 p-2"><div class="rounded" style="height:140px;

    background-image:url(https://via.placeholder.com/140);

    background-size:cover;background-position:center;"></div><a class="btn btn-default mt-2 p-1 w-100"
    href="#URL">Name</a></div>
    </div>
  </div>
</div>