03 simple bits

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

 <!----- avatar ----->
  <div class="card rounded-circle bg-faded p-2 border-0 mx-auto" style="height: 115px; width: 115px; z-index: 1; margin-bottom: -30px;">

  <div class="card rounded-circle border-0 h-100 w-100" style="
  background: url(

  https://f2.toyhou.se/file/f2-toyhou-se/characters/6287009?1584858723

  );
  background-size: cover;
  background-position: center;
  z-index: 1;">
  </div>

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

  <div class="card bg-faded rounded-0 border-0 p-2 pt-4">

  <!----- name

      if you wanna change the symbol next to the name look here -> https://fontawesome.com/icons

  ----->
      <span class="mx-auto mt-1 text-primary" style="letter-spacing: 2px; font-size: 14px; font-weight: 300">

        NAME

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

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

        age . pronouns . etc

      </span>

    <hr class="w-50 my-1">
  <!---------->

      <p class="text-center mb-1">

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

         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rhoncus pretium erat a finibus. Aliquam dictum scelerisque velit quis bibendum. Nullam sed mi auctor, viverra elit laoreet, laoreet augue.

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

      </p>

    <hr class="w-50 my-1">

    <!----- notice header ----->
      <span class="mx-auto text-muted" style="letter-spacing: 2px; font-size: 14px; font-weight: 300">

        <i class="fal fa-comment-exclamation"></i> NOTICE

      </span>
    <!---------->

    <ul class="fa-ul">

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

      <li><i class="fal fa-chevron-right text-muted"></i>
        Lorem ipsum dolor sit amet.
      </li>

      <li><i class="fal fa-chevron-right text-muted"></i>
        Nunc rhoncus pretium erat a finibus.
      </li>

      <li><i class="fal fa-chevron-right text-muted"></i>
        Aliquam dictum scelerisque velit.
      </li>

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

    </ul>

  <!----- social media ----->
    <h5 class="text-muted text-center mt-1" style="letter-spacing: 0.5px; font-size: 10px;">

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

  </h5>

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

  </div>

  <!----- credit -- please dont remove ----->
  <a class="fal fa-code pull-right tooltipster mt-1" title="code by ronnie" href="https://toyhou.se/6661907.-users-simple-bits" style="font-size: 10px;"></a>
  <!---------->

</div>