What You Know (Updated)

<!--

    WHAT YOU KNOW
    compact counterpart to IT'S GOOD FOR YOU

    by meromercury

    created: 06/13/20 // updated: 05/16/24

      accent color: #7154FB
      highlight and ctrl+F to change
      use fontawesome.com to change the symbols

-->

<div class="container">
<div class="mx-auto" style="font-size:14px;max-width:950px;">

<div class="row no-gutters">


<!-- LEFT IMAGE -->
<div class="col-md-4 col-sm-12" style="z-index:-999;">
    <!------- image will automatically center & cover - dimensions 610 H x 317 W ------->
    <!------- replace 'IMAGE URL' with your image url ------->
      <div class="card w-100" style="position:absolute;
          background-image:url(IMAGE URL);
      border-radius:10px;background-size:cover;background-position:center;height:610px;z-index:-1;border: 2px dashed #7154FB">

  </div>
</div>

<div class="col-lg-8 col-sm-12 px-3 pl-3" style="z-index:1;">
<div class="card bg-faded p-3" style="height:610px; border-radius:10px; border:2px dashed #7154FB;">

<!--------------------------- DETAILS --------------------------->

<div class="card border-0 p-2 mb-3">
  <div class="row no-gutters">
  <div class="col-sm">
    <ul class="list-group list-group-flush">
        <li class="list-group-item d-flex justify-content-between" >
          <i class="fas fa-user" style="color:#7154FB"></i>
          Name
         </li>
        <li class="list-group-item d-flex justify-content-between">
          <i class="fad fa-id-card" style="color:#7154FB"></i>
          Pronouns
          </li>
        <li class="list-group-item d-flex justify-content-between">
          <i class="far fa-person-half-dress" style="color:#7154FB"></i>
          Identity
          </li>
      </ul>
  </div>

  <div class="p-2 d-none d-lg-block">
    <div class="card h-100 w-0"></div>
  </div>
  <hr class="w-100 my-0 d-lg-none">

  <div class="col-sm">
    <ul class="list-group list-group-flush">
        <li class="list-group-item d-flex justify-content-between">
          <i class="fad fa-clock" style="color:#7154FB"></i>
          Age
          </li>
        <li class="list-group-item d-flex justify-content-between">
          <i class="fad fa-user-md" style="color:#7154FB"></i>
          Occupation
          </li>
        <li class="list-group-item d-flex justify-content-between">
          <i class="fas fa-music" style="color:#7154FB"></i>
          <!------- replace the youtube link with your own, make sure there are "quotes" around the link ------->
          <a href="https://www.youtube.com/watch?v=KpCcJY-rJSs" style="color:#7154FB" target=_blank>
          Artist - Title
        </a></li>
      </ul>
  </div>
  </div>
</div>

<!--------------------------- BIOGRAPHY --------------------------->

  <div class="card border-0 container-fluid p-3" style="height:calc(100%); overflow-y:auto; overflow-x:hidden;">

    <p>This scrolls, but keeping it short looks best. Don't forget the < p > tags for paragraphs!</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus vehicula eros a rhoncus. Aenean auctor pallentesque elit, ut feugiat nibh molestie eu. Nunc sit amet lacus accumsan, tempus leo eu, condimentum mi. Morbi vitae ultrices sem. Aliquam euismod justo in nibh consectetur, id posuere eros viverra.</p>

    <!-- optional list -- delete from here to /ul to remove-->
    <br>
    <ul style="list-style-type:circle;">
      <li>And I can tell just what you want</li>
      <li>You don't want to be alone</li>
      <li><u>You don't want to be alone</u></li>
      <li>And I can't say it's what you know</li>
      <li>But you've known it <b>the whole time</b></li>
      <li>Yeah, <i>you've known it the whole time</i></li>
    </ul>

    <!------- add your text above this line! don't forget the <p> tags! ------->
  </div>
</div>
</div></div></div></div>
<!----- my credit! please don't touch this ----->
<div class="m-1 text-center 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>