Stor8

<!---
==== cytoplasm character
==== HTML by 8byte
----
==== Colors
---- For easier changes, use Ctrl F and then
---- click the plus icon at the bottom to 
---- replace all.
====
#50530e - main background
#3c251f - bookshelf and main text
#f8edc0 - yellow boxes
#6f4336 - bookshelf interior
--->
<div class="mx-auto" style="max-width: 800px;">
  <div class="row no-gutters" style="color: #3c251f;">
    <div class="col-md-7 p-1">
      <div class="p-3" style="background: #50530e;">
        <div class="flex-md-row flex-column">
          <!--- profile picture --->
          <div style="background-image: url('IMGURL'); background-size: cover; background-position: center; height: 150px; min-width: 150px;" class="bg-faded"></div>
          <div class="flex-fill flex-column ml-md-2 ml-0 mt-md-0 mt-2" style="height: 150px;">
            <div class="px-2 py-1" style="background: #f8edc0;">
              <!--- character name --->
              <h1 class="font-weight-normal mb-0">Character Name</h1>
            </div>
            <!--- divider ---><div class="p-1"></div>
            <div class="px-3 py-2 overflow-auto" style="background: #f8edc0;">
              <p>Donec varius rutrum velit et molestie. Duis condimentum varius pharetra. Phasellus in tortor placerat, sodales nibh quis, sagittis mi. Phasellus congue finibus ornare. Curabitur augue eros, mollis ut dignissim cursus, gravida ac nisl. Phasellus interdum massa tellus, auctor ullamcorper lectus malesuada a. Vivamus metus arcu, euismod vel eros pellentesque, auctor sagittis ex. Praesent non arcu ipsum. Proin eu lectus arcu. Nullam maximus placerat lorem. Quisque neque sapien, volutpat eu placerat eget, molestie vel turpis.</p>
            </div>
          </div>
        </div>
        <!--- divider ---><div class="p-1"></div>
        <div id="PARENT">
          <div class="collapse show" id="PAGEDOLL" data-parent="#PARENT" style="height: 375px; transition: none;">
            <div class="justify-content-center align-items-center" style="height: 375px;">
              <a href="#INFO" data-toggle="collapse" class="h-100">
                <!--- pagedoll --->
                <img src="IMGURL" class="h-100" />
              </a>
            </div>
          </div>
          <div class="collapse" id="INFO" data-parent="#PARENT" style="height: 375px; transition: none;">
            <div class="flex-column" style="height: 375px;">
              <div class="px-3 py-2 overflow-auto" style="background: #f8edc0;">
                <!--- info --->
                <p>Donec varius rutrum velit et molestie. Duis condimentum varius pharetra. Phasellus in tortor placerat, sodales nibh quis, sagittis mi. Phasellus congue finibus ornare. Curabitur augue eros, mollis ut dignissim cursus, gravida ac nisl. Phasellus interdum massa tellus, auctor ullamcorper lectus malesuada a. Vivamus metus arcu, euismod vel eros pellentesque, auctor sagittis ex. Praesent non arcu ipsum. Proin eu lectus arcu. Nullam maximus placerat lorem. Quisque neque sapien, volutpat eu placerat eget, molestie vel turpis.</p>
                <p>Donec varius rutrum velit et molestie. Duis condimentum varius pharetra. Phasellus in tortor placerat, sodales nibh quis, sagittis mi. Phasellus congue finibus ornare. Curabitur augue eros, mollis ut dignissim cursus, gravida ac nisl. Phasellus interdum massa tellus, auctor ullamcorper lectus malesuada a. Vivamus metus arcu, euismod vel eros pellentesque, auctor sagittis ex. Praesent non arcu ipsum. Proin eu lectus arcu. Nullam maximus placerat lorem. Quisque neque sapien, volutpat eu placerat eget, molestie vel turpis.</p>
              </div>
              <!--- divider ---><div class="p-1"></div>
              <div class="text-center">
                <a href="#PAGEDOLL" data-toggle="collapse" style="color: #f8edc0;" class="tooltipster" title="back" data-placement="bottom"><i class="fas fa-tree"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-5 flex-column p-1">
      <div class="p-3 flex-column h-100" style="background: #3c251f;">
        <!--- shelf --->
        <div class="flex-fill justify-content-center align-items-center" style="background: #6f4336;">
          <!--- image --->
          <img src="IMGURL" style="height: 100px;" />
        </div>
        <!--- shelf ---><div class="p-1"></div>
        <div class="flex-fill justify-content-center align-items-center" style="background: #6f4336;">
          <!--- image --->
          <img src="IMGURL" style="height: 100px;" />
          <!--- books --->
          <div style="background: #52510f; width: 15px; height: calc(100% - .5rem); transform: rotate(7.5deg);" class="ml-auto mr-2"></div>
          <div style="background: #52510f; width: 15px; height: calc(100% - .5rem);" class="ml-1"></div>
          <div style="background: #3c3b0b; width: 20px; height: calc(100% - .5rem);" class="ml-1"></div>
          <div style="background: #35351d; width: 10px; height: calc(100% - .5rem);" class="ml-1"></div>
          <div style="background: #3a3829; width: 18px; height: calc(100% - .5rem);" class="mx-1"></div>
        </div>
        <!--- shelf ---><div class="p-1"></div>
        <div class="flex-fill justify-content-center align-items-center" style="background: #6f4336;">
          <!--- books --->
          <div style="background: #52510f; width: 15px; height: calc(100% - .5rem);" class="mx-1"></div>
          <div style="background: #49482a; width: 20px; height: calc(100% - .5rem);" class="mr-auto"></div>
          <!--- image --->
          <img src="IMGURL" style="height: 100px;" class="mx-auto" />
        </div>
        <!--- shelf ---><div class="p-1"></div>
        <div class="flex-fill justify-content-around align-items-center" style="background: #6f4336;">
          <!--- image --->
          <img src="IMGURL" style="height: 100px;" />
          <!--- image --->
          <img src="IMGURL" style="height: 100px;" />
        </div>
      </div>
    </div>
  </div>
  <div class="text-center"><small>code by @8byte</small></div>
</div>