music tape (simple)

<!---

  ========================================================

  code by Lullah
  colors used:
    > primary (bootstrap; backrgound)
    > #fff (white; links, background)
    > #333 (very dark grey; text)
    > #222 (off-black; borders)

  You may...
    > Edit this code to oblivion!
    > Recycle parts for your own use!

  You may not...
    > Remove my watermark!

  ========================================================

--->

<div class="container" style="width:530px;margin-top:8%;">
  <div class="" style="height:243px;padding: 10px 8px;border-radius:15px;background-color:#222;">
    <div class="row mx-auto">

      <div class="col-3 text-center" style="margin-bottom:5px;">
        <!--------- FIRST LINK --------->
        <a href="https://twitter.com/" title="twitter" style="color:#fff" class="tooltipster" data-toggle="tooltip" data-placement="top"><i class="far fa-circle fa-lg"></i></a>
      </div>
      <div class="col-3 text-center" style="margin-bottom:5px;">
        <!--------- SECOND LINK --------->
        <a href="https://twitter.com/" title="twitter" style="color:#fff" class="tooltipster" data-toggle="tooltip" data-placement="top"><i class="far fa-circle fa-lg"></i></a>
      </div>
      <div class="col-3 text-center" style="margin-bottom:5px;">
        <!--------- THIRD LINK --------->
        <a href="https://twitter.com/" title="twitter" style="color:#fff" class="tooltipster" data-toggle="tooltip" data-placement="top"><i class="far fa-circle fa-lg"></i></a>
      </div>
      <div class="col-3 text-center" style="margin-bottom:5px;">
        <!--------- FOURTH LINK --------->
        <!--- if you really dislike that paw icon at the bottom just put my credit here LOL --->
        <a href="https://twitter.com/" title="twitter" style="color:#fff" class="tooltipster" data-toggle="tooltip" data-placement="top"><i class="far fa-circle fa-lg"></i></a>
      </div>

    </div>

    <div class="bg-primary">
      <div class="" style="padding:30px 40px;">
      <div class="row no-gutters text-white" style="height:100px;background-color:#fff;border-radius:50px;">

        <!--------- left circle --------->
        <div class="col-3 my-auto" style=";"><div class="rounded-circle m-auto" style="height:60px;width:60px;border:10px solid #222;background-color:#fff;"></div>
        </div>

        <div class="col-6 text-center my-auto">
          <div class="">
            <!--------- USER DESC --------->
            <!-- this box does not scroll so if u write too much the text's gonna float off -->
            <p class="" style="font-size:0.9em; letter-spacing:1px;background-color:#fff;color:#333;">
              NAME<br>
              PRONOUNS<br>
              AGE Y.O</p>
          </div>
        </div>

        <!--------- right circle --------->
        <div class="col-3 my-auto" style=";"><div class="rounded-circle m-auto" style="height:60px;width:60px;border:10px solid #222;background-color:#fff;"></div>
        </div>

      </div>
      </div>
    </div>
    <div class="w-100 text-center mt-1" style="font-size:;letter-spacing:1.5px;font-style:italic;color:#fff">
      <!--------- MUSIC LINK --------->
      <i class="fas fa-play fa-sm"></i> <a href="https://www.youtube.com/" class="text-white" style="text-decoration:underline">TITLE - Artist</a>

    </div>
  </div>
  <div class="text-right">
    <a class="tooltipster" style="color:#fff;font-size:0.8em;" title="code by Lullah" href="lullah"><i class="fas fa-paw"></i></a>
  </div>
</div>