mosaics

<!---

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

  code by Lullah
  colors used:
    > faded (bootstrap)
    > secondary (bootstrap)

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

  You may not...
    > Remove my watermark!

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

--->

<div class="container p-0" style="max-width:800px;">
  <div class="row no-gutters">

    <div class="col-md-1 pt-2" style="">
      <div class="row no-gutters">

        <!--- sidebar image ---->
        <div class="col-md-12"
             style="background-image:url(https://images.unsplash.com/photo-1605428922289-03c166775bac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80);
                    background-size:cover;
                    background-position:center;
                    height:564px;"></div>

      </div>
    </div>

    <div class="col-md-7 px-md-3 pt-2">
      <div class="row no-gutters">
          <!--- personality (title) --->
          <div class="col-md-12 bg-secondary text-uppercase px-2 py-1 justify-content-between" style="font-size:13px;letter-spacing:0.75;">
            <span><i class="fas fa-user"></i></span>
            <span>Personality</span>
          </div>
          <!--- personality (content) --->
          <div class="col-md-12 px-2 py-1 bg-faded" style="height:175px;overflow:auto;">
            <div class="" style="font-size:13px;">
              &nbsp;&nbsp;&nbsp;&nbsp;"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
            </div>
          </div>

          <!--- history (title) --->
          <div class="col-md-12 bg-secondary text-uppercase px-2 py-1 mt-3 justify-content-between" style="font-size:13px;letter-spacing:0.75;">
            <span><i class="fas fa-book"></i></span>
            <span>History</span>
          </div>
          <!--- history (content) --->
          <div class="col-12 px-2 py-1 bg-faded" style="height:175px;overflow:auto;">
            <div class="" style="font-size:13px;">
              &nbsp;&nbsp;&nbsp;&nbsp;"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
            </div>
          </div>

          <!--- trivia (title) --->
          <div class="col-md-12 bg-secondary text-uppercase px-2 py-1 mt-3 justify-content-between" style="font-size:13px;letter-spacing:0.75;">
              <span><i class="fas fa-question-circle"></i></span>
              <span>Trivia</span>
          </div>
            <!--- trivia (content) --->
          <div class="col-md-12 px-2 py-1 bg-faded" style="height:100px;overflow:auto;">
            <div style="font-size:13px;">
              <ul class="px-3">
                <li class="m-0">one</li>
                <li class="m-0">two</li>
                <li class="m-0">three</li>
                <li class="m-0">four</li>
              </ul>
            </div>

          </div>

        </div>

      </div>

    <div class="col-md-4 pt-2">
      <!--- icon ---->
      <div class="mb-3"
           style="background-image:url(https://images.unsplash.com/photo-1456829357196-59fbd019ecd1?ixlib=rb-1.2.1&auto=format&fit=crop&w=675&q=80);
                  background-size:cover;
                  height:250px;"></div>
      <!--- basic profile ---->
      <div class="card rounded-0 border-0 p-2 bg-faded" style="height:298px;overflow:auto;font-size:13px;">
        <div class="justify-content-between">
          <span>Name</span>
          <span>Info</span></div><div><hr class="my-1"></div>

        <div class="justify-content-between">
          <span>Nickname</span>
          <span>Info</span></div><div><hr class="my-1"></div>

        <div class="justify-content-between">
          <span>Age</span>
          <span>Info</span></div><div><hr class="my-1"></div>

        <div class="justify-content-between">
          <span>Pronouns</span>
          <span>Info</span></div><div><hr class="my-1"></div>

        <div class="justify-content-between">
          <span>Species</span>
          <span>Info</span></div><div><hr class="my-1"></div>

        <div class="justify-content-between">
          <span>Height</span>
          <span>Info</span></div><div><hr class="my-1"></div>

        <div class="justify-content-between">
          <span>Occupation</span>
          <span>Info</span></div><div><hr class="my-1"></div>

        <div class="justify-content-between">
          <span>Status</span>
          <span>Info</span></div><div><hr class="my-1"></div>

        <div class="justify-content-between mb-1">
          <span>Voice</span>
          <span>Info</span></div>

        <div><a class="w-100 btn btn-secondary rounded-0 border-0"
                href="https://www.youtube.com/watch?v=hF6Wds75rjg">
                <i class="fas fa-play fa-xs"></i></a>
        </div>

        </div>
      </div>
    </div>
    <div class="text-right" style="font-size:0.9em"><a class="tooltipster text-secondary" title="code by lullah" href="lullah"><i class="fas fa-paw"></i></a></div>
  </div>
</div>