04 simple bits

<div class="container p-0 my-auto" style="max-width: 300px; font-size: 12px;">

  <div class="card bg-faded rounded-0 p-1">

  <div class="justify-content-between">
    <!----- header

        to change the symbols, check here -> https://fontawesome.com/icons
        to change it, just replace 'cloud-sun' with the symbol name you wanna use

    ----->
    <h5 class="text-primary d-inline-block m-0" style="font-size: 14px;">

      <i class="fal fa-cloud-sun"></i>

    </h5>

    <h5 class="text-primary d-inline-block m-0" style="font-size: 14px; font-weight: 300; letter-spacing: 2px;">

      NAME

    </h5>

    <h5 class="text-primary d-inline-block m-0" style="font-size: 14px;">

      <i class="fal fa-cloud-sun"></i>

    </h5>
    <!----- end header ----->
  </div>
  </div>

  <div class="card rounded-0 p-2" style="border-style: none solid none solid;">

    <!----- top text ----->

    <span class="mx-auto text-muted" style="letter-spacing: 1px;">

      <i class="fal fa-chevron-right"></i>
      age . gender . etc
      <i class="fal fa-chevron-left"></i>


    </span>

    <!---------->

    <div class="card rounded-0 my-1" style="border-style: solid none none none;"></div>

    <p class="text-center m-0">

      <!----- paragraph -- wont scroll, keep that in mind ----->

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rhoncus pretium erat a finibus. Aliquam dictum scelerisque velit quis bibendum.

      <!---------->
    </p>

    <div class="card rounded-0 my-1" style="border-style: solid none none none;"></div>

    <!----- quote ------>

    <span class="mx-auto text-muted" style="letter-spacing: 1px; font-style: italic;">

      <i class="fal fa-quote-left"></i>
        write a quote or something here...
      <i class="fal fa-quote-right"></i>


    </span>

    <!---------->

    <div class="card rounded-0 my-1" style="border-style: solid none none none;"></div>

    <p class="text-center">

    <!----- art status ----->

      <span style="letter-spacing: 1px;">
        commissions
      </span>
      <i class="fal fa-arrow-right mr-1"></i>
      STATUS

      <br>

      <span style="letter-spacing: 1px;">
        art trades
      </span>
      <i class="fal fa-arrow-right mr-1"></i>
      STATUS

      <br>

      <span style="letter-spacing: 1px;">
        collabs
      </span>
      <i class="fal fa-arrow-right mr-1"></i>
      STATUS

      <br>

      <span style="letter-spacing: 1px;">
        requests
      </span>
      <i class="fal fa-arrow-right mr-1"></i>
      STATUS

      <br>

    <!---------->

    </p>


  </div>

  <div class="card bg-faded rounded-0 p-1">
  <div class="justify-content-between">

    <h5 class="text-primary d-inline-block m-0" style="font-size: 14px;">
      <span class="text-muted pull-left" style="letter-spacing: 0.5px; font-size: 12px;">

    <!----- social media ----->

    <a class="fab fa-instagram tooltipster" title="instagram"
    href="LINK HERE"></a>

    /

    <a class="fab fa-twitter tooltipster" title="twitter"
    href="LINK HERE"></a>

    /

    <a class="fab fa-youtube tooltipster" title="youtube"
    href="LINK HERE"></a>

    /

    <a class="fab fa-tumblr tooltipster" title="tumblr"
    href="LINK HERE"></a>

    /

    <i class="fab fa-discord tooltipster text-primary" title="user#0000"></i>

    <!---------->

  </span>
    </h5>


  <!----- credit -- please dont remove ----->
    <h5 class="text-primary d-inline-block m-0" title="code by ronnie" style="font-size: 14px;">
      <a class="fal fa-code tooltipster" href="https://toyhou.se/6661907.-users-simple-bits"></a>
    </h5>
  <!---------->

  </div>
  </div>

</div>