USER CARD . f2u toyhouse code

<!-------

     USER CARD - by raggedinsomnia
          username color: #8f4343
          use ctrl + f to quickly change the color! (though its only used once so u could do it manually lol)
          need a live code editor? use [ https://th.circlejourney.net/# ] !
          need an image hosting site? i reccomend [ https://filegarden.com/ ] !
          other sites -
          icons: [ https://fontawesome.com/search ]
          color pickers (i use both equally):
          https://imagecolorpicker.com/
          https://redketchup.io/color-picker

------>


<!----- code start --->


<div class="container p-1" style="width:330px; letter-spacing:.3px; font-size:13px;"> <div class="card rounded-0 bg-faded p-1">

<!---- username + icon --->

    <div class="col-12 p-1">
    <div class="card rounded-0 p-1">
    <div class="justify-content-between">
          <span style="font-size:13px; letter-spacing:2.4px; color:#8f4343; font-size:14.2px;">
          USERNAME
          </span>

          <span class="text-muted my-auto" style="letter-spacing:.8px;">
          <i class="fa-duotone fa-comet"></i>
          </span>
         </div>
    </div>

    </div>

    <!--- image

    replace IMAGE_URL with your image link

    --->

    <div class="col-md-12 p-1"> <div class="card rounded-0 p-1" style="height: 150px;"> <div class="card rounded-0 border-0 h-100" style="
  background: url(IMAGE_URL);
  background-size: cover;
  background-position: center;">
  </div></div></div>

  <!---- basic info --->

   <div class="col-12 p-1">
    <div class="card rounded-0 p-1">
    <div class="justify-content-between">
          <span style="font-size:13px; letter-spacing:.4px; font-size:12px;" class="text-muted">
          name ⋆ age ⋆ pronouns etc etc
          </span>

          <span class="text-muted my-auto" style="letter-spacing:.8px;">
          <i class="fa-duotone fa-stars"></i>
          </span>

         </div>
    </div>

    </div>

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

   <div class="col-12 p-1">
    <div class="card rounded-0 p-1" style="height: 130px; overflow: auto;">
    <div class="justify-content-between">
    <p style="font-size:13px; font-family:calibri;">
   write whatever you want here. this box will scroll. The instability present in all Triple-Element Ethereals is no better represented than in the Gaddzooks. Every snap of their jaws and tap of their feet threatens to shatter its very form, and yet this Monster is able to keep it together and perform. An outlier in the Monster World as far as double-headedness goes, both of the Gaddzook brainstems get along famously and are always totally in sync with one another (we suppose you'd have to be in order to attain that level of percussive prowess). This cheerfulness and amicability extends to friendships with its fellow Ethereals as well, particularly the closely-related Yooreek.
    </p>

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

    <!---- links

    change LINK to your link and INFO to whatever social media etc. its linking too. change icons as needed

    ---->


<div class="col-12 p-1">
    <div class="card rounded-0 p-1">
    <div class="text-left">
          <span style="font-size:13px; letter-spacing:.4px; font-size:12.3px;" class="text-muted">
          <a href="link" data-toggle="tooltip" title="INFO"><i class="fa-solid fa-star px-1 my-1"></i></a> ⋆
          </span>
          <span style="font-size:13px; letter-spacing:.4px; font-size:12.3px;" class="text-muted">
          <a href="LINK" data-toggle="tooltip" title="INFO"><i class="fa-solid fa-pen-paintbrush px-1 my-1"></i></a> ⋆
          </span>
          <span style="font-size:13px; letter-spacing:.4px; font-size:12.3px;" class="text-muted">
          <a href="LINK" data-toggle="tooltip" title="INFO"><i class="fab fa-instagram px-1 my-1"></i></a> ⋆
          </span>
          <span style="font-size:13px; letter-spacing:.4px; font-size:12.3px;" class="text-muted">
          <a href="LINK" data-toggle="tooltip" title="INFO"><i class="fab fa-trello px-1 my-1"></i></a>          </span>

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

         </div>
    </div>

    </div>

</div></div>

<!---- CREDIT ... DO NOT TOUCH! ---->
<div class="text-center" style="font-size:9px;"><a href="https://toyhou.se/raggedinsomnia" class="text-muted" data-toggle="tooltip" title="code by raggedinsomnia"><i class="fa-duotone fa-comet"></i></a></div>

<!--- code end --->