guilt by association

<!--
guilt by association by METALOCALYPSE

  NOTES
01. please do not remove credit, redistribute, or claim as your own
02. WYSIWYG off, otherwise things will break easier. you can use https://th.circlejourney.net/# to see what changes as you update it
03. remember to link to the source of the stamps and images you use
04. playlist needs 2+ songs to move between, more can be added to by copying and pasting where marked, or you can remove the next button and just have 1
05. to insert a song, take the video id (the text after watch?v= in the url "https://www.youtube.com/watch?v=THISSTUFF") and paste it where the code says VIDEOID. this will ensure you're using an embed link, inserting the whole URL straight from the video page won't work
06. if songs don't update after you change them, trying clearing your cookies from toyhou.se
07. if a song title is too long and messes with the format, lower the number in "font-size: 100%" until it fits on one line

  RESOURCES
01. https://fontawesome.com/icons?d=gallery
02. https://th.circlejourney.net/#

-->

<!---------------{ CODE START }--------------->

<div class="container p-0 my-auto" style="max-width: 550px;">
<div class="row justify-content-center">
  <div class="col-4 p-0" style="min-width: 100px;">
    <!-- IMG WINDOW 1-->
    <div class="card mb-1">
      <div class="card-header border-0 p-1">
        <div class="pull-left ml-1">
          <i class="fad fa-box-heart"></i>
        </div>
        <div class="pull-right">
          <div class="btn btn-secondary btn-xs py-0"><i class="fa fa-minus fa-xs"></i></div>
          <div class="btn btn-secondary btn-xs py-0"><i class="fa fa-window-restore fa-xs"></i></div>
          <a class="btn btn-danger btn-xs py-0 tooltipster" title="img src" href="SOURCE"><i class="fa fa-times fa-xs"></i></a>
        </div>
        <div class="card-block p-0 pt-1" style="clear:both">
        <div class="mt-1 rounded card" style="padding-top:100%;

         background-image: url('IMAGE');
         background-position: center;
         background-size: 101% 101%;
         background-repeat: no-repeat;
        "></div>
        </div>
      </div>
    </div>
    <!-- IMG WINDOW 2-->
    <div class="card">
      <div class="card-header border-0 p-1">
        <div class="pull-left ml-1">
          <i class="fad fa-box-heart"></i>
        </div>
        <div class="pull-right">
          <div class="btn btn-secondary btn-xs py-0"><i class="fa fa-minus fa-xs"></i></div>
          <div class="btn btn-secondary btn-xs py-0"><i class="fa fa-window-restore fa-xs"></i></div>
          <a class="btn btn-danger btn-xs py-0 tooltipster" title="img src" href="SOURCE"><i class="fa fa-times fa-xs"></i></a>
        </div>
        <div class="card-block p-0 pt-1" style="clear:both">
        <div class="mt-1 rounded card" style="padding-top:125%;

         background: url('IMAGE');
         background-position: center;
         background-size: 101% 101%;
         background-repeat: no-repeat;
        "></div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-8 text-center p-3" style="min-width: 320px;">

    <!-- SOCIAL MEDIA LINKS -->
    <span style="letter-spacing:0.5rem;">
      <a class="tooltipster" href="LINK" title="DeviantArt"><i class="fab fa-deviantart"></i></a>
      <a class="tooltipster" href="LINK" title="Twitter"><i class="fab fa-twitter"></i></a>
      <a class="tooltipster" href="LINK" title="Tumblr"><i class="fab fa-tumblr"></i></a>
      <a class="tooltipster" href="" title="NAME#0000"><i class="fab fa-discord"></i></a>
      <!-- code credit, plz do not remove -->
      <a class="tooltipster" href="https://toyhou.se/7409567" title="Code by METALOCALYPSE"><i class="fas fa-cog"></i></a>
    </span>

    <div class="card bg-faded my-2 rounded-0" style="padding:1px;"></div>

    <!-- INFO -->
    <p class="font-weight-bold m-0">Name - Pronouns - Age</p>

    <div class="card bg-faded my-2 rounded-0" style="padding:1px;"></div>

    <!-- DESCRIPTION -->
    <p class="m-0" style="max-height: 40%; overflow-y:auto;">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum, turpis nec ultrices ultricies, dolor nunc bibendum ante, eu malesuada sem diam quis mauris. Ut purus justo, consectetur ac ex in, blandit semper erat. Vestibulum ut justo sit amet augue blandit dictum sed sed dui. Proin dictum venenatis elit id fringilla. Aliquam viverra convallis felis, at tincidunt magna lacinia sed. Quisque ut sem vitae massa viverra molestie.

    </p>

    <div class="card bg-faded my-2 rounded-0" style="padding:1px;"></div>

    <!-- ART STATUS -->
    <p class="justify-content-around my-0 mx-3">
    <span class="mx-1">Comissions: <a class="tooltipster" href="" title="Open"><i class="fas fa-check"></i></a></span>
    <span class="mx-1">Trades: <a class="tooltipster" href="" title="Friends Only"><i class="fas fa-user-friends"></i></a></span>
    <span class="mx-1">Requests: <a class="tooltipster" href="" title="Closed"><i class="fas fa-times"></i></a></span>
    </p>

    <div class="card bg-faded my-2 rounded-0" style="padding:1px;"></div>

    <!-- MUSIC PLAYER -->
    <div id="playlist" class="carousel slide" data-interval="900000">
      <div class="carousel-inner">

     <!-- SONG 1 -->
     <div class="carousel-item active">
       <div class="justify-content-between mx-3" style="overflow:hidden">
         <span><iframe class="flex-fill" style="height:1em; width:1em; opacity:0; position:absolute; margin-top:5.5px; z-index:1;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src="https://www.youtube.com/embed/VIDEOID"></iframe>
         <a href=""><i class="fas fa-play"></i></a> <a href="#playlist" role="button" data-slide="next"><i class="fas fa-step-forward"></i></a></span>
         <span style="font-size: 100%">TITLE <span class="text-muted">- ARTIST</span></span>
       </div>
     </div>

    <!-- SONG 2 -->
    <div class="carousel-item">
       <div class="justify-content-between mx-3" style="overflow:hidden">
         <span><iframe class="flex-fill" style="height:1em; width:1em; opacity:0; position:absolute; margin-top:5.5px; z-index:1;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src="https://www.youtube.com/embed/VIDEOID"></iframe>
         <a href=""><i class="fas fa-play"></i></a> <a href="#playlist" role="button" data-slide="next"><i class="fas fa-step-forward"></i></a></span>
         <span style="font-size: 100%">TITLE <span class="text-muted">- ARTIST</span>
         <i class="fas fa-exclamation-triangle fa-xs text-warning tooltipster" title="Explicit Content"></i></span>
         </span>
       </div>
     </div>

   <!-- copy & paste song 2 here for more songs -->

     </div>
    </div>

    <div class="card bg-faded my-2 rounded-0" style="padding:1px;"></div>

    <!-- STAMPS -->
    <div class="mt-3">

      <a href="SOURCE">
      <img class="mx-1"
      src="IMAGE"></a>

      <a href="SOURCE">
      <img class="mx-1"
      src="IMAGE"></a>

      <a href="SOURCE">
      <img class="mx-1"
      src="IMAGE"></a>

    </div>


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