profile 10 (2.2.24 hc) (side)

<!------

    【F2U】 53.Live [ Dark. ]

      // Code by Leporidebug

      //// COLORS ////

      main accent → cf1102
      text color → d4d4d4
      button → d42242
      blacks → 000000
      whites → ffffff


------>
<br>
<div class="card mx-auto mt-4 p-1" style="max-width:700px;border-radius:0.5rem;background-color:#000000;font-family:'avenir';">

  <!--------------------------------

      | MAIN BACKGROUND

  ---------------------------------->
  <div class="row no-gutters rounded modal-open" style="background-size:cover;background-position:center;

    /*----- main background ; autoscale center, replace IMG_URL with image address -----*/;
    background-image:url(https://64.media.tumblr.com/3efad74cd094cc1e7e5ad96a5eea8aa8/d88ea49db67c54dd-f8/s2048x3072/d11a975ec7d42b47262459c42c2a4327c485aef3.jpg);

  ">

    <!--------------------------------

      | LEFT BOX


    ---------------------------------->
    <div class="col-lg col-12 flex-column">
      <div class="card border-0 p-1" style="height:250px;background-color:transparent;">
        <!----- name box ----->
        <div class="card border-0 p-2" style="background-color:rgba(0,0,0,0.8);max-width:250px;box-shadow:0 0 8px rgba(0,0,0,0.3)">
          <div class="row no-gutters">

            <!----- avatar image ----->
            <div class="col-auto my-auto">
              <div class="card rounded-circle" style="width:65px;height:65px;background-color:transparent;border-color:#ffffff;border-width:2px;background-size:cover;background-position:center;

                /*----- user avatar ; replace IMG_URL with image address -----*/;
                background-image:url(https://64.media.tumblr.com/ca05bf082fc23a590a7d8834125d87fd/675243af7c2436b4-9b/s1280x1920/bfc7eb4a0ea0ae19c08966b816c05b277c1f3f2a.jpg);

              "></div>
            </div>

            <!----- name ----->
            <div class="col pl-3 my-auto">
              <h1 class="text-uppercase font-weight-bold mb-0" style="letter-spacing:1px;color:#cf1102;">

                XUXU ✧･ﾟ

              </h1>
              <p class="small" style="color:#d4d4d4;">

                @ xuxu |  <!----- carrd ----->
          <a href="https://xuxu-time.carrd.co/" title="carrd" class="tooltipster" data-placement="bottom" style="text-decoration:none;color:#cf1102;">
            <i class="fas fa-id-card fa-sm fa-fw"></i> carrd
          </a>


              </p>
            </div>
          </div>
        </div>
        <!----- name box ----->



      </div>
    </div>
    <!----- LEFT BOX END ----->


    <!----- filler box between two boxes, no need to edit ----->
    <div class="col-lg-auto col-12 flex-column">
      <div class="card border-0 rounded-0 p-1 d-flex flex-fill" style="background-color:#000000;"></div>
    </div>


    <!--------------------------------

      | RIGHT BOX

        - main profile

    ---------------------------------->
    <div class="col-lg-4 col-12 flex-column">

      <!-----------------------------------

        scrollable "chat"-styled profile

      ------------------------------------->
      <div class="card border-0 d-flex flex-fill rounded-0 p-3" style="background-color:rgba(0, 0, 0, 0.5);min-height:100px;max-height:300px;overflow:auto;">


        <!----- basics ---->
        <div class="card border-0 p-3 small mb-2" style="background-color:rgba(0,0,0,0.9);max-width:250px;box-shadow:0 0 8px rgba(0,0,0,0.3);color:#d4d4d4;">

          <p>18+ . they/them . pst . 🇦🇫 🇺🇸
          <br>

        </div>
        <!----- basics end ---->


        <!----- intro box ---->
        <div class="card border-0 p-3 small mb-2" style="background-color:#6b0f07;max-width:250px;box-shadow:0 0 8px rgba(0,0,0,0.3);color:#ffffff;">

          <!----- header ---->
          <div class="row no-gutters">
            <!----- greeting ---->
            <div class="col my-auto">
              <h4 class="mb-0 font-weight-bold text-uppercase">

                WHAT'S UP,

              </h4>
            </div>

            <!----- avatar image (again) ---->
            <div class="col-auto">
              <div class="card rounded-circle mb-1" style="width:30px;height:30px;background-color:transparent;border-color:#ffffff;border-width:2px;background-size:cover;background-position:center;

                /*----- user avatar ; replace IMG_URL with image address -----*/;
                background-image:url(https://64.media.tumblr.com/62b2bc69554b4f562324a270019c9b9b/37f37deabac96f53-3d/s400x600/92f79805f815759f5297412843bea91b28ce94c1.jpg);

              "></div>
            </div>

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

          <!----- intro content ---->
          <p>
            ...babes, bros, and nonbinary crows~!  This is a side account, I'm not using it at the moment! My main account is @xuxu.
          </p>
        </div>
        <!----- intro box end ---->




      </div>
      <!----- chat profile end ----->


      <!-----------------------------------

        message and socials

      ------------------------------------->
      <div class="card pt-2 rounded-0 border-0 d-flex flex-fill" style="background-color:#000000;">

        <!----- send message ----->
        <div class="card border-0 modal-open mb-1" style="border-radius:1.5rem;">
          <div class="row no-gutters">
            <!----- message box ----->
            <div class="col-9 flex-column">
            <div class="card px-2 py-1 rounded-0 border-0 flex-fill" style="background-color:#d4d4d4;color:#000000;">

                <!----- message content ----->

                <p class="small my-auto faded">

"dianxia, take my hand"              </p>
              </div>
            </div>
            <!----- message box end ----->

            <!----- send button ----->
            <div class="col-3 flex-column">
              <!----- replace username with your own ----->
              <a
                href="https://drawing.garden/"
                title="join hua cheng!"

                class="w-100 btn rounded-0 border-0 d-flex flex-fill mx-auto my-auto tooltipster" style="color:#ffffff;background-color:#d42242;">

                  <!----- fontawesome icon ----->
                  <i class="fas fa-paper-plane fa-fw" style="font-size:0.75rem;"></i>

              </a>
            </div>
            <!----- send button end ----->
          </div>
        </div>
        <!----- send message end ----->



      </div>
      <!----- message and socials end ------>
    </div>
    <!----- RIGHT BOX END ----->
  </div>
</div>
<!----- MAIN CONTENT END ----->
<!----- CREDIT ! please do not remove ----->
<p class="text-center faded mx-auto mb-4" style="max-width:700px;">
  <a href="https://toyhou.se/19722685" class="small text-muted" style="text-decoration:none;">code by Leporidebug</a>
</p>
<!----- [ CODE END ] ----->