What You Know (Outdated)

<!--

    WHAT YOU KNOW

    compact counterpart to IT'S GOOD FOR YOU

    a code by meromercury

    created: 06/13/20 // updated: 2/25/23

      accent color: #7154FB
      ctrl+F to change. replace the hex code with a space for no color
      use fontawesome 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 no-gutters">
  <div class="card m-1 border-0" style="height:610px;width:320px;z-index:-1;">
    <!-- image dimensions are 610 H x 320 W, crop it with any editing software -->
    <img alt="ALT TEXT HERE" src="https://via.placeholder.com/320x610" class="w-100 h-100" style="border-radius:10px;"></img>
  </div>
</div>

<div class="col-lg-8 no-gutters">
<div class="col-lg-12 p-1 pl-3">


<div class="p-3 mb-2 h-100 bg-faded" style="border-radius:10px;min-height:610px">
<div class="row no-gutters container-fluid p-1" style="height:520px">


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

<div class="card card-block 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>
          Pronunciation</li>
        <li class="list-group-item d-flex justify-content-between">
          <i class="far fa-transgender" style="color:#7154FB"></i>
          Gender</li>
      </ul>
  </div>

  <div class="p-2">
    <div class="card h-100 w-0"></div>
  </div>

  <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-tint" style="color:#7154FB"></i>
          Color</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>
          <a href="https://www.youtube.com/watch?v=KpCcJY-rJSs" style="color:#7154FB" target=_blank>Artist - Theme</a></li>
      </ul>
  </div>
  </div>
</div>

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

  <div class="col-lg-12 card card-block border-0 container-fluid m-0 p-2 mb-3" style="height:400px">
    <div class="col-12 h-100 p-2 table-responsive container-fluid" style="min-height:380px;max-height:380px">
    <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>

    </div>
  </div>


</div>
</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="made by cass" style="color:#A4A4A4;font-weight:600"><i class="fal fa-code"></i></a></div>

</div>