Stor8

<!-----------------------------------------------------------------
      TINY - User
      Profile by HTMLobster (noll)
 
 
      TOS:
      Do not remove my credit. It may be edited or moved, but must be accessible on the page.
      You may edit code/frankenstein with others as long as their TOS/Rules allows.
      Turn off WYSIWYG and turn on Code Editor in settings. WYSIWYG will break the code. DO NOT USE IT AT ALL.
      Do not redistribute (reupload, reshare, etc.). Do not redistribute edits.
      By using this code you agree to these rules.
------------------------------------------------------------------>

<div class="mx-auto" style="max-width:700px;">
  <div class="row">
    <div class="col-auto mx-auto mt-4 text-center">
      <!-- stars -->
      <i class="fa-solid fa-star fa-fw fa-2x text-primary" style="position:absolute; top:4rem; right:1rem; opacity:.6;"></i>
      <i class="fa-solid fa-star fa-fw text-primary" style="position:absolute; top:6rem; right:.75rem; transform:rotate(-15deg);"></i>
      <i class="fa-solid fa-star fa-fw fa-3x text-primary" style="position:absolute; bottom:0; left:1rem; transform:rotate(90deg);"></i>
      <!-- image -->
      <img src="IMG_URL" style="max-height:225px;">
    </div>
    <div class="col-md mt-4">
      <!-- heading -->
      <h1 class="text-primary display-4 ml-2" style="font-size:1.8rem;">
        Name. Age. Pronouns.
      </h1>
      <div class="bg-faded rounded p-3 mt-n4">
        <div style="max-height:173px; overflow:auto; scrollbar-width:thin;">
          <!-- text - scrolls -->
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget tortor iaculis, luctus augue eu, dignissim ante. Aenean nunc felis, ultrices non lacinia nec, vestibulum at tortor. Phasellus sit amet blandit justo. Quisque sollicitudin augue quis neque pretium, sed egestas nibh blandit. Pellentesque tempus tortor non lorem dapibus, in auctor sem pretium. Nunc a turpis sit amet eros ullamcorper mattis. Sed porta nunc malesuada, laoreet velit et, iaculis urna. Suspendisse sollicitudin quam ut.
          </p>
        </div>
      </div>
      <!-- heading -->
      <h1 class="text-primary display-4 mr-2 mt-n4 text-right" style="font-size:1.8rem;">
        welcome!
      </h1>
    </div>
    <div class="col-md-1 mt-md-4 justify-content-center">
      <div class="row mx-auto">
        <div class="col-md-12 col mt-2">
          <!-- link -->
          <a href="LINK_URL" class="btn btn-primary rounded-circle p-0 align-items-center justify-content-center" style="width:45px; height:45px;">
            <!-- icon -->
            <i class="fa-brands fa-instagram fa-fw" style="font-size: 1.5em;"></i>
          </a>
        </div>
        <div class="col-md-12 col mt-2">
          <!-- link -->
          <a href="LINK_URL" class="btn btn-primary rounded-circle p-0 align-items-center justify-content-center" style="width:45px; height:45px;">
            <!-- icon -->
            <i class="fa-brands fa-deviantart fa-fw" style="font-size: 1.5em;"></i>
          </a>
        </div>
        <div class="col-md-12 col mt-2">
          <!-- link -->
          <a href="LINK_URL" class="btn btn-primary rounded-circle p-0 align-items-center justify-content-center" style="width:45px; height:45px;">
            <!--icon  -->
            <i class="fa-brands fa-twitter fa-fw" style="font-size: 1.5em;"></i>
          </a>
        </div>
        <div class="col-md-12 col mt-2">
          <!-- link -->
          <a href="LINK_URL" class="btn btn-primary rounded-circle p-0 align-items-center justify-content-center" style="width:45px; height:45px;">
            <!-- icon -->
            <i class="fa-solid fa-id-card fa-fw" style="font-size: 1.5em;"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="text-center mt-3">
    <a href="https://toyhou.se/HTMLobster" title="html by noll" class="tooltipster">
      <i class="fa-solid fa-lobster fa-fw"></i>
    </a>
  </div>
</div>