[F2U] Meet the Artist

<!--
  F2U Code Meet the Artist

    Free to use & free to edit
    Ripping and "Frankenstein-ing" code is allowed
    Credit not necessary but appreciated
    Feel free to message me for any help/ questions

  Made by CanineKing
-->
<div class="container-fluid">
  <!-- HEADER, spans both columns-->
  <div class="row justify-content-center">
    <div class="col-lg-11">
      <div class="card w-100 border-0">
        <p class="text-muted font-weight-bold" style="font-size:40px;">Name Here
        <span class="float-right text-muted font-weight-light" style="font-size:30px;">Meet The Artist <i class="fas fa-palette ml-2"></i></span></p>
      </div>
    </div>
  </div>
  <div class="row justify-content-center">
    <!-- SIDE IMAGE, max size will be at 615px so it WILL cut at the bottom of the picture-->
    <div class="col-lg-4">
      <div class="card border-0 rounded-0" style="height:615px; background-image:url('IMG URL'); background-position:top center; background-size:cover;"></div>
    </div>
    <!-- INfORMATION, the ENTIRE box WILL scroll-->
    <div class="col-lg-7">
      <div class="card h-100 border-0" style="height:615px; overflow:auto">
        <div class="container-fluid">
          <div class="row align-items-center justify-content-center">
            <div class="col-lg-12">
              <!--
                FIRST SECTION, this box will NOT SCROLL
                Feel free to change this entire section below to have an about or whatever you want instead w/ a simple <p></p> tag
              -->
              <div class="card bg-faded my-2 p-3 border-0 rounded-0">
                <p class="text-center font-weight-light my-1" style="font-size:22px;">
                Gender (pronouns)<span class="mx-1">|</span>
                Age<span class="mx-1">|</span>
                Nationality<span class="mx-1">|</span>
                MBTI
                </p>
                <p class="text-center font-weight-light my-1" style="font-size:22px;">
                Birthday<span class="mx-1">|</span>
                Sign icon
                </p>
                <p class="text-center text-muted font-weight-light font-italic my-1" style="font-size:18px;">
                  "Quote. Lorem ipsum dolor sit amet..."
                </p>
                <p class="my-1">
                  Write an about if you want. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate suscipit lorem, nec interdum turpis efficitur sed. Sed efficitur bibendum dolor, sit amet luctus nulla mollis at.
                </p>
                <!-- feel free to add (or remove) more elements ABOVE this line -->
              </div>
            </div>
          </div>
          <div class="row align-items-center justify-content-center">
            <!-- LIKES SECTION, this box will NOT scroll-->
            <div class="col-lg-6">
              <div class="card p-3 my-1 mr-0 bg-faded border-0 rounded-0">
                <h2 class="text-center text-muted text-uppercase font-weight-bold" style="font-size:25px;">likes
                <span class="float-left text-muted font-weight-bold"><i class="fas fa-heart"></i></span>
                </h2>
                <ul>
                  <li>Lorem ipsum</li>
                  <li>consectetur adipiscing elit</li>
                  <li>Sed vulputate</li>
                  <li>suscipit</li>
                  <li>lorem</li>
                  <!-- add more elements ABOVE this line -->
                </ul>
              </div>
            </div>
            <!-- DISLIKES SECTION, this box will NOT scroll-->
            <div class="col-lg-6">
              <div class="card p-3 my-1 ml-0 bg-faded border-0 rounded-0">
                <h2 class="text-center text-muted text-uppercase font-weight-bold" style="font-size:25px;">dislikes
                <span class="float-left text-muted font-weight-bold"><i class="fas fa-heart-broken"></i></span>
                </h2>
                <ul>
                  <li>Lorem ipsum</li>
                  <li>consectetur adipiscing elit</li>
                  <li>Sed vulputate</li>
                  <li>suscipit</li>
                  <li>lorem</li></ul>
                  <!-- add more elements ABOVE this line -->
              </div>
            </div>
          </div>
          <div class="row align-items-center justify-content-center" >
            <!-- INVENTORY SECTION, this box will NOT scroll-->
            <div class="col-lg-12 my-1" >
            <h2 class="text-center text-muted text-uppercase font-weight-bold">inventory</h2>
              <p class="text-center">
                <img class="d-inline-block m-1" style="width:130px;" src="IMG URL">
                <img class="d-inline-block m-1" style="width:130px;" src="IMG URL">
                <img class="d-inline-block m-1" style="width:130px;" src="IMG URL">
                <img class="d-inline-block m-1" style="width:130px;" src="IMG URL">
                <img class="d-inline-block m-1" style="width:130px;" src="IMG URL">
                <!-- add the following code ABOVE this line to add another image

                <img class="d-inline-block m-1" style="width:130px;" src="IMG URL">

                -->
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- credit -->
  <p class="small text-right"><a href="https://toyhou.se/6282843.-f2u-code-meet-the-artist" target="_BLANK" class="text-muted"><i class="fa fa-paw mr-1"></i><i class="fas fa-crown mr-1"></i></a></p>
</div>