F2U Queue

<!-----------------------------------------------------------------
      QUEUE - User Profile
      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. Do not redistribute edits.
      By using this code you agree to these rules.
------------------------------------------------------------------>
<div class="mx-auto mb-5" style="max-width:1200px;">
  <!-- section one -->
  <div class="row mt-4 mx-1">
    <!-- left column -->
    <div class="col-lg-auto row justify-content-center">
      <!-- image column -->
      <div class="col-auto">
        <div style="height:404px;">
          <div class="pl-3" style="background:radial-gradient(#f00, #000); box-shadow:#f00 0 0 10px, #f00 0 0 15px, #f00 0 0 20px; height:95%; width:100%;">
            <div class="mr-n3">
              <!-- side image - tall is best -->
              <img alt="A skeleton person wearing a t-shirt, sweatpants, and a baseball hat. It is backlit by red light. Its hands are in its pockets and it is leaning casually." src="https://i.imgur.com/RaoInyI.png">
            </div>
          </div>
        </div>
      </div>
      <!-- colors column -->
      <div class="col-auto my-5 ml-n5 align-items-center">
        <!-- color palette - change background & box shadow -->
        <div style="height:404px;">
          <div class="p-4" style="background:#000; box-shadow:#000 0 0 5px;"></div>
          <div class="p-4 mt-2" style="background:#2c0504; box-shadow:#2c0504 0 0 5px;"></div>
          <div class="p-4 mt-2" style="background:#470c0a; box-shadow:#470c0a 0 0 5px;"></div>
          <div class="p-4 mt-2" style="background:#9d0000; box-shadow:#9d0000 0 0 5px;"></div>
          <div class="p-4 mt-2" style="background:#f00; box-shadow:#f00 0 0 5px;"></div>
        </div>
      </div>
    </div>
    <!-- right column -->
    <div class="col-lg ml-lg-n3 mr-lg-4 mt-n5 mt-lg-0">
      <div class="d-flex justify-content-end">
        <!-- heading -->
        <h1 class="display-4 py-2 px-3 mr-4 font-weight-normal" style="background:radial-gradient(#f00, #000); color:#fff; box-shadow:#f00 0 0 10px, #f00 0 0 15px, #f00 0 0 20px;">
          <!-- Name -->
          Name/Nickname
        </h1>
      </div>
      <!-- content -->
      <div class="px-3 pt-4 pb-5 mt-n4" style="color:#fff; background:#000; box-shadow:#000 0 0 5px;">
        <div class="row pb-2">
          <div class="col-lg mb-2 mb-lg-0">
            <!-- description -->
            <div style="max-height:225px; overflow:auto;">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at arcu nec enim lobortis semper. Mauris mi enim, placerat vitae arcu sit amet, finibus facilisis risus. Nulla aliquet maximus ex eu aliquet. Vestibulum ullamcorper, elit vitae gravida tempus, odio velit rutrum nibh, ut porta quam mi placerat lectus. </p>
              <p>Fusce lobortis libero in massa finibus hendrerit. Nulla condimentum ligula sit amet tellus vestibulum, ut consequat arcu pharetra. Nullam ullamcorper auctor enim, id placerat ligula tincidunt at. Morbi sit amet erat vestibulum, luctus sem ut, hendrerit odio. Pellentesque sollicitudin id sapien a sagittis.</p>
              <p>Sed id elit eget dui feugiat porta. In tempor tellus non nisi pretium, ullamcorper sodales risus molestie. Praesent ut felis ultrices, posuere elit a, eleifend quam. Nulla nec sodales nunc. Aenean sed urna pulvinar, pellentesque erat sit amet, pellentesque urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque ornare neque ut risus dignissim, sed hendrerit massa consequat. Ut ac gravida mauris, vitae pellentesque mauris. Donec lacinia turpis et dolor efficitur viverra. Ut posuere sapien ut hendrerit fringilla.</p>
            </div>
          </div>
          <!-- current status -->
          <div class="col-lg-4">
            <div style="max-height:227px; overflow:auto;">
              <h2>Status</h2>
              <p>>> working on __</p>
              <h2>Commissions</h2>
              <p>>> closed</p>
              <h2>Trades</h2>
              <p>>> open to friends</p>
              <h2>Requests</h2>
              <p>>> closed</p>
            </div>
          </div>
        </div>
      </div>
      <!-- bottom section -->
      <div class="row mt-n5 mx-lg-5 mx-2 justify-content-end">
        <!-- music -->
        <div class="col-lg">
          <div class="p-3 h-100" style="background:#000;color:#fff;box-shadow:#000 0 0 5px;">
            <div class="row h-100 align-items-center mt-1">
              <div class="col-auto">
                <div class="d-flex align-items-center">
                  <div class="overflow-hidden" style="width:26px;">
                    <audio controls="" style="width:100px;height:50px;margin-left:-12px;opacity:0;">
                      <!-- music file - upload somewhere with linking to host it (i used discord) -->
                      <source src="SRC_URL">
                    </audio>
                    <div class="mt-n5">
                      <!-- play button -->
                      <i class="fas fa-play fa-2x"></i>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="d-flex align-items-center">
                  <div class="w-100 text-right">
                    <!-- music info -->
                    Song by Artist
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- featured characters -->
        <div class="col-lg-auto col-sm-3 col-6 mt-sm-3 mt-2 pl-1">
          <!-- character image -->
          <div style="background:#f00 url(https://i.imgur.com/zBLrze6.png) center; background-size:cover; box-shadow:#000 0 0 5px;">
            <!-- character link -->
            <a class="btn h-100 w-100 p-5" href="CHAR_URL"></a>
          </div>
        </div>
        <div class="col-lg-auto col-sm-3 col-6 mt-sm-3 mt-2 pl-1">
          <!-- character image -->
          <div style="background:#f00 url(https://i.imgur.com/zBLrze6.png) center; background-size:cover; box-shadow:#000 0 0 5px;">
            <!-- character link -->
            <a class="btn h-100 w-100 p-5" href="CHAR_URL"></a>
          </div>
        </div>
        <div class="col-lg-auto col-sm-3 col-6 mt-sm-3 mt-2 pl-1">
          <!-- character image -->
          <div style="background:#f00 url(https://i.imgur.com/zBLrze6.png) center; background-size:cover; box-shadow:#000 0 0 5px;">
            <!-- character link -->
            <a class="btn h-100 w-100 p-5" href="CHAR_URL"></a>
          </div>
        </div>
        <div class="col-lg-auto col-sm-3 col-6 mt-sm-3 mt-2 pl-1">
          <!-- character image -->
          <div style="background:#f00 url(https://i.imgur.com/zBLrze6.png) center; background-size:cover; box-shadow:#000 0 0 5px;">
            <!-- character link -->
            <a class="btn h-100 w-100 p-5" href="CHAR_URL"></a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- section one end -->

  <!-- section two -->
  <div class="row mb-5 mt-lg-n5 mt-4 mx-1">
    <!-- left column -->
    <div class="col-lg mx-lg-3">
      <div class="d-flex justify-content-start">
        <!-- heading -->
        <h1 class="display-4 py-2 px-3 ml-4 font-weight-normal" style="background:radial-gradient(#f00, #000); color:#fff; box-shadow:#f00 0 0 10px, #f00 0 0 15px, #f00 0 0 20px;">
          <!-- title -->
          Welcome
        </h1>
      </div>
      <div class="mt-n4 p-3 py-4" style="background:#000; box-shadow:#000 0 0 5px; color:#fff;">
        <div class="row pb-2">
          <div class="col-lg mb-2 mb-lg-0">
            <!-- description -->
            <div style="max-height:200px; overflow:auto;">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at arcu nec enim lobortis semper. Mauris mi enim, placerat vitae arcu sit amet, finibus facilisis risus. Nulla aliquet maximus ex eu aliquet. Vestibulum ullamcorper, elit vitae gravida tempus, odio velit rutrum nibh, ut porta quam mi placerat lectus. </p>
              <p>Fusce lobortis libero in massa finibus hendrerit. Nulla condimentum ligula sit amet tellus vestibulum, ut consequat arcu pharetra. Nullam ullamcorper auctor enim, id placerat ligula tincidunt at. Morbi sit amet erat vestibulum, luctus sem ut, hendrerit odio. Pellentesque sollicitudin id sapien a sagittis.</p>
              <p>Proin rhoncus semper velit, in aliquet elit viverra vitae. Nullam lacinia, mi id tempor sagittis, massa nulla laoreet nunc, sed vehicula massa est blandit magna. Sed vel dignissim ante, a egestas elit. Quisque lacus dui, mattis ac metus eget, rutrum convallis sem. Etiam aliquet rutrum nisl eu ultrices. Mauris eu lorem fringilla, finibus lectus non, rhoncus ligula. Donec et quam justo.</p>
            </div>
          </div>
          <!-- updates -->
          <div class="col-lg-4">
            <div style="max-height:200px; overflow:auto;">
              <h2>DD/MM/YYYY</h2>
              <p>>> update description.</p>
              <h2>DD/MM/YYYY</h2>
              <p>>> update description.</p>
              <h2>DD/MM/YYYY</h2>
              <p>>> update description.</p>
              <h2>DD/MM/YYYY</h2>
              <p>>> update description.</p>
            </div>
          </div>
        </div>
      </div>
      <!-- bottom section -->
      <div class="row justify-content-center mt-n4 mx-lg-5 mx-1">
        <div class="col hidden-md-down">
          <div class="h-100" style="background:#000; box-shadow:#000 0 0 5px;"></div>
        </div>
        <!-- link -->
        <div class="col-auto px-1 px-lg-2 px-1">
          <div class="p-sm-3 p-2" style="background:#000; box-shadow:#000 0 0 5px;">
            <a style="color:#000; text-shadow:#f00 0 0 5px, #f00 0 0 10px, #f00 0 0 15px;" data-toggle="tooltip" href="#" title="name#0000">
              <!-- symbol -->
              <i class="fab fa-discord fa-2x"></i>
            </a>
          </div>
        </div>
        <!-- link -->
        <div class="col-auto px-lg-2 px-1">
          <div class="p-sm-3 p-2" style="background:#000; box-shadow:#000 0 0 5px;">
            <a style="color:#000; text-shadow:#f00 0 0 5px, #f00 0 0 10px, #f00 0 0 15px;" href="SOCIAL_URL">
              <!-- symbol -->
              <i class="fab fa-instagram fa-2x"></i>
            </a>
          </div>
        </div>
        <!-- link -->
        <div class="col-auto px-lg-2 px-1">
          <div class="p-sm-3 p-2" style="background:#000; box-shadow:#000 0 0 5px;">
            <a style="color:#000; text-shadow:#f00 0 0 5px, #f00 0 0 10px, #f00 0 0 15px;" href="SOCIAL_URL">
              <!-- symbol -->
              <i class="fab fa-patreon fa-2x"></i>
            </a>
          </div>
        </div>
        <!-- link -->
        <div class="col-auto px-lg-2 px-1">
          <div class="p-sm-3 p-2" style="background:#000; box-shadow:#000 0 0 5px;">
            <a style="color:#000; text-shadow:#f00 0 0 5px, #f00 0 0 10px, #f00 0 0 15px;" href="SOCIAL_URL">
              <!-- symbol -->
              <i class="fas fa-coffee fa-2x"></i>
            </a>
          </div>
        </div>
        <!-- link -->
        <div class="col-auto px-lg-2 px-1">
          <div class="p-sm-3 p-2" style="background:#000; box-shadow:#000 0 0 5px;">
            <a style="color:#000; text-shadow:#f00 0 0 5px, #f00 0 0 10px, #f00 0 0 15px;" href="SOCIAL_URL">
              <!-- symbol -->
              <i class="fab fa-deviantart fa-2x"></i>
            </a>
          </div>
        </div>
        <div class="col px-1 hidden-md-down">
          <div class="h-100" style="background:#000; box-shadow:#000 0 0 5px;"></div>
        </div>
      </div>
    </div>
    <!-- right column -->
    <div class="col-lg-auto row justify-content-center mt-5 mt-lg-0">
      <div class="col-auto">
        <!-- side image -->
        <div class="pl-3" style="background:radial-gradient(#f00, #000); box-shadow:#f00 0 0 10px, #f00 0 0 15px, #f00 0 0 20px; height:245px; width:100%;">
          <div class="ml-n5">
            <!-- image -->
            <img alt="A skeleton person with space buns wearing a t-shirt and jeans. It is backlit by red light. It sits with its arms propped up on its knees." src="https://i.imgur.com/gBGG3qI.png">
          </div>
        </div>
        <div class="text-center mt-5">
          <a style="color:#000; text-shadow:#f00 0 0 10px, #f00 0 0 15px, #f00 0 0 20px;" href="https://toyhou.se/HTMLobster">
          <i class="fas fa-code"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
  <!-- section two end -->
  <br>
</div>