Aura (Updated)

<!--

    AURA
    by meromercury

    released 4/20/24 || updated 5/16/24

    FontAwesome icons included, remove <! -- and -- > to use.
    See the FontAwesome website for a full list of icon options.

      accent color: #c4205a
      highlight and use ctrl+F to change

--->


<div class="container col-sm-12 col-md-8 col-lg-6 mb-4">

  <!----- place your image URL between the ( parentheses ) ----->
    <div class="card rounded-0 bg-faded" style="height:125px;width:100%;
    background-image:url(IMAGE URL);
    background-size:cover;background-position:center center;border: 0px;"></div>

    <!--  -->
    <div class="container py-3">
    <div class="card w-100 text-uppercase text-center bg-none border-top-0 border-bottom-0 rounded-0 py-3 px-2 display-4" style="color:#c4205a ;letter-spacing:.1em;border: 2px solid;">

  <!----- quote or name ----->
      <p>
        Do you want to see the girl who lives <b>behind the aura?</b>
      </p>
    </div>
    </div>

  <div class="card px-0 rounded-0 bg-faded" style=";width:100%;border-width:2px;border:0px solid #c4205a ;">

<!----- BENEATH THIS LINE: remove the <! --  -- > AND the words to use the fontawesome icons ----->

    <div class="row m-3 mb-3" style="font-size:16px">
      <div class="col">
        <div class="d-inline-flex w-100 my-0">
          <span class="my-2 font-weight-bold" style="color:#c4205a">

            <!--
            <i class="fa-duotone fa-address-card fa-lg"></i>
            -->
            NAME

          </span>
          <hr class="flex-grow-1 mx-4 my-auto">
          <span class="my-2">
            info
          </span>
        </div>
        <div class="d-inline-flex w-100">
          <span class="my-2 font-weight-bold" style="color:#c4205a">

            <!--
            <i class="fa-duotone fa-clock fa-lg"></i>
            -->
            AGE

          </span>
          <hr class="flex-grow-1 mx-4 my-auto">
          <span class="my-2">
            info
          </span>
        </div>
        <div class="d-inline-flex w-100">
          <span class="my-2 font-weight-bold" style="color:#c4205a">

            <!--
            <i class="fa-solid fa-person-dress-simple fa-lg"></i>
            -->
            PRONOUNS

          </span>
          <hr class="flex-grow-1 mx-4 my-auto">
          <span class="my-2">
            info
          </span>
        </div>
      </div>

      <div class="card h-auto w-0 m-2 mt-3 d-none d-lg-block rounded-0" style="border:2px solid #c4205a"></div>

      <div class="col">
        <div class="d-inline-flex w-100 my-0">
          <span class="my-2 font-weight-bold" style="color:#c4205a">

            <!--
            <i class="fa-duotone fa-calendar-days fa-lg"></i>
            -->
            OBTAINED

          </span>
          <hr class="flex-grow-1 mx-4 my-auto">
          <span class="my-2">
            info
          </span>
        </div>
        <div class="d-inline-flex w-100">
          <span class="my-2 font-weight-bold" style="color:#c4205a">

            <!--
            <i class="fa-duotone fa-paintbrush fa-lg"></i>
            -->
            DESIGNER

          </span>
          <hr class="flex-grow-1 mx-4 my-auto">
          <span class="my-2">
            info
          </span>
        </div>
        <div class="d-inline-flex w-100">
          <span class="my-2 font-weight-bold" style="color:#c4205a">

            <!--
            <i class="fa-sharp fa-solid fa-dollar-sign fa-lg"></i>
            -->
            WORTH

          </span>
          <hr class="flex-grow-1 mx-4 my-auto">
          <span class="my-2">
            info
          </span>
        </div>
      </div>
    </div>
   <!------- end rows ------->


   <!------- bio start ------->
   <div class="mt-0 mb-3 text-muted table-responsive" style="max-height:120px;font-size:12px;padding:0px 28px 0px 28px">

      <p>This scrolls, but shorter looks better. Or delete this paragraph if you don't want text. Remember to use < p > tags for paragraphs. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis justo sollicitudin posuere sollicitudin. Phasellus ut pellentesque elit. Fusce magna turpis, posuere tristique eros vitae, dapibus convallis odio. Nunc lobortis id nunc at efficitur. Nullam arcu velit, interdum a turpis vel, consectetur euismod ligula. Fusce quis sem tincidunt, auctor sapien vel, vulputate dolor.</p>

      <!-- paste above this line to expand the biography -->
     </div>
   <!------- end bio ------->

   <!------- player start ------->
   <div class="px-4 mt-0 mb-3">

      <div class="d-inline-flex w-100 justify-content-between" style="font-size:18px">
          <a class="my-auto ml-2 px-0 btn border-0 melody-embed" style="color:#c4205a;" href="#">
            <iframe frameborder="0" style="height:30px;width:30px;opacity:0.0001;position:absolute;"

              src="https://www.youtube.com/embed/YaVSTFv9QOc">
            <!--
            MUSIC PLAYER TUTORIAL

            for playlists, copy everything after ?list= and paste at the end:
            https://www.youtube.com/embed/videoseries?
            ^^ then replace "URL" with that

            for songs, copy everything after watch?v= and replace "URL" with that

            remember to keep the "QUOTATION MARKS" around the link or else it could break.
            -->

            </iframe>
            <i class="fa-regular fa-circle-play fa-2x"></i>
          </a>
          <hr class="flex-grow-1 mx-4 my-auto d-none d-lg-block">
          <p class="my-2" style="letter-spacing:.2em;">
            <span style="color:#c4205a;font-weight:bold"><i class="fa-solid fa-music fa-sm pr-2"></i>
            TITLE
            </span>-<span style="font-style:italic;">
            ARTIST
            </span>
          </p>
      </div>

   </div>
</div>

<div class="m-1 text-right text-primary" style="font-size:14px">
<a target="_blank" href="https://toyhou.se/meromercury" data-toggle="tooltip" title="code" style="color:#A4A4A4;font-weight:600"><i class="fal fa-code"></i></a></div>
</div>