Interface

<!-- Colors
Press Ctrl-F to highlight all color codes

Main:
#545454
#777777
#1c1c1c
#e2e2e2
#b8b8b8
#c8c8c8

Accents:
#c74343

Neutrals:
#fff
#000
#ccc

Shadows / Borders:
#000
-->






<div class="mx-auto my-4" style="max-width:440px; font-size:11px; font-family: Tw Cen MT;">

  <div style="border:3px solid #545454; background:#e2e2e2; box-shadow:3px 3px 0 #000;">

    <div style="background:#777777; color:#fff; padding:4px 6px; font-weight:700; display:flex; justify-content:space-between; align-items:center; font-size:12px;">
      User Profile

      <div style="display:flex; gap:2px;">
        <!-- MINIMIZE ICON -->
        <div style="width:18px; height:16px; background:#e2e2e2; color:#000; text-align:center; line-height:14px; border:1px solid #0f255a;">
          <i class="fa-solid fa-minus" style="font-size:12px; line-height:14px;"></i>
        </div>
        <!-- MAXIMIZE ICON -->
        <div style="width:18px; height:16px; background:#e2e2e2; color:#000; text-align:center; border:1px solid #0f255a;">
          <i class="fa-regular fa-square" style="font-size:12px; line-height:14px;"></i>
        </div>
        <!-- CLOSE ICON -->
        <div style="width:18px; height:16px; background:#c74343; color:#fff; text-align:center; font-weight:900; border:1px solid #0f255a;">
          <i class="fa-solid fa-xmark" style="font-size:12px; line-height:14px;"></i>
        </div>
      </div>
    </div>

  <div style="padding:6px;">
        <!--BANNER 1 -->
    <div style="background:url(https://i.pinimg.com/736x/8d/84/22/8d842231a3b501d5c4f72f87e9b989b6.jpg); background-size:cover; background-position:center; height:70px; border:2px ridge #c8c8c8;"></div>

        <!-- PFP SECTION

        Change "https://i.pinimg.com/736x/ad/59/77/ad5977a8ecea2e666d5a8402c66472f2.jpg" to your own liking!!-->
    <div class="row no-gutters mt-1">

      <div class="col-md-4 p-1">

        <div style="width:130px; height:130px; margin:auto; border:2px groove #b8b8b8; background:#fff;">
          <div style="height:100%; background:url(https://i.pinimg.com/736x/ad/59/77/ad5977a8ecea2e666d5a8402c66472f2.jpg); background-size:cover; background-position:center;"></div>
        </div>


        <!-- SOCIALS SECTION -->
        <div style="height:110px; overflow:auto; border:2px groove #b8b8b8; background:#fff; margin-top:8px; padding:4px; font-size:10px;">

          <p><b><i class="fa-solid fa-arrow-up-right-from-square"></i> Socials</b></p>

          <ul style="list-style:none; padding-left:2px; line-height:1.4;">
            <li>• <a href="TWITTERLINK" style="color:#777777;">Twitter</a></li>
            <li>• <a href="TUMBLRLINK" style="color:#777777;">Tumblr</a></li>
            <li>• <a href="INSTALINK" style="color:#777777;">Instagram</a></li>
            <li>• <a href="TIKTOKLINK" style="color:#777777;">TikTok</a></li>
            <li>• <a href="EXTRALINK" style="color:#777777;">Xtra Link</a></li>

          </ul>

        </div>

      </div>

        <!-- SOCIALS SECTION END  -->

        <!--INFO SECTION -->

      <div class="col-md-8 p-1">

        <div style="font-size:20px; font-weight:700; color:#777777; text-shadow:1px 1px 0 #fff;">
          username <i class="fa-solid fa-mask"></i>
        </div>

        <div style="background:#fff; border:2px groove #b8b8b8; padding:4px; font-size:10px; margin-top:4px;">
          name ◉ pronouns ◉ age ◉ misc
        </div>

        <div style="height:120px; overflow:auto; background:#fff; border:2px ridge #b8b8b8; padding:6px; margin-top:8px; font-size:11px;">

          <p>write about yourself here!!
          <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        </div>

        <!--INFO SECTION END -->

        <!--STAMPS SECTION -->


        <div style="margin-top:8px; text-align:center;">
          <img src="https://64.media.tumblr.com/512e6ac90b4cb1722f55caae7e0d9be5/b96403498f7c0c21-ce/s100x200/ba87e00cf63931832b49387bdaefced16a073746.pnj" width="73" height="55" style="display:inline-block; margin:4px;">
          <img src="https://64.media.tumblr.com/e350de1b47ce9df78e97d7416e211612/933a5e45a5c0b6d6-78/s100x200/b9d00f1f6c7cbb69a1563e8b1e8f3bc0be8dd9a0.webp" width="73" height="55" style="display:inline-block; margin:4px;">
          <img src="https://64.media.tumblr.com/8f8d1b7631956817aad832c057668c1c/933a5e45a5c0b6d6-02/s100x200/fff96593a7099cb9a2edd5993a26172b3d1d1a73.webp" width="73" height="55" style="display:inline-block; margin:4px;">
        </div>

        <!--STAMPS SECTION END-->

        <!--FEATURED CHARACTERS -->

        <!-- Change "CHAR1" "CHAR2" "CHAR3" "CHAR4" to your characters!! -->
        <div style="position: relative; width: fit-content; margin: 0 auto;">

        <!-- Box -->
        <div style="text-align: center; margin-top:8px;
                      border:2px groove #b8b8b8; background:#fff;
                      padding:6px; font-size:11px;">
            <b style="color:#777777;">Featured Characters</b>
            <div style="margin-top:6px; display:flex; gap:12px; flex-wrap:wrap; justify-content:center;">
              <a href="CHAR1">
                <img src="https://i.pinimg.com/736x/20/7c/e9/207ce9985f55417ca15bccf1f38e122b.jpg" width="60" height="60" style="border:1px solid #b8b8b8; border-radius:50%;">
              </a>
              <a href="CHAR2">
                <img src="https://i.pinimg.com/736x/20/7c/e9/207ce9985f55417ca15bccf1f38e122b.jpg" width="60" height="60" style="border:1px solid #b8b8b8; border-radius:50%;">
              </a>
              <a href="CHAR3">
                <img src="https://i.pinimg.com/736x/20/7c/e9/207ce9985f55417ca15bccf1f38e122b.jpg" width="60" height="60" style="border:1px solid #b8b8b8; border-radius:50%;">
              </a>
              <a href="CHAR4">
                <img src="https://i.pinimg.com/736x/20/7c/e9/207ce9985f55417ca15bccf1f38e122b.jpg" width="60" height="60" style="border:1px solid #b8b8b8; border-radius:50%;">
      </a>
    </div>
  </div>

</div>


      </div>

    </div>
        <!-- ★ END FEATURED CHARACTERS -->
        <!-- SONG SECTION -->
        <!-- you could change "VBHnP2wXR5Q" but keep "?controls=0" to make it better -->
    <div style="margin-top:10px; padding:6px; border:2px groove #b8b8b8; background:#fff;">

      <span style="position:relative;">
        <iframe frameborder="0" style="opacity:0.01; width:1rem; height:1rem; position:absolute;" src="https://www.youtube.com/embed/VBHnP2wXR5Q?controls=0"></iframe>
        <i class="fa-solid fa-play" style="color:#777777; font-size:16px;"></i>
      </span>

      <span class="pull-right" style="font-size:11px;">
        <b style="color:#777777;">SONG</b>
        <span style="opacity:0.8;">– ARTIST</span>
      </span>
        <!-- SONG SECTION END -->
    </div>
  <div style="padding:6px;">
        <!--BANNER 2 -->
    <div style="background:url(https://i.pinimg.com/736x/10/93/c1/1093c16dd84ec505ba1b42b5b80d093e.jpg); background-size:cover; background-position:center; height:70px; border:2px ridge #c8c8c8;"></div>

  </div>
</div>
  <!-- Coding credit, dont remove -->
<div class="col-12 mx-auto" style="text-align:center;"><a href="https://toyhou.se/sokie_Visuvel" style="color:#444;"> <i class="fa-solid fa-cloud"></i></a></div>
  </div>