Stor8

<!---
==== Kalon
==== HTML by 8byte
----
==== Colors
---- For easier changes, use Ctrl F and then
---- click the plus icon at the bottom to 
---- replace all.
====
#a5b0bd - header bar and buttons
#b1ffc8 - main accent
#efefef - main text
#28262c - main background
--->
<div class="mx-auto" style="max-width: 640px;">
  <!--- top header bar --->
  <div class="container p-2 text-center" style="background: #a5b0bd; color: #efefef; border-radius: 15px 0 0 0; border-bottom: 5px solid #b1ffc8;">
    <h1 class="font-italic text-uppercase mb-0 font-weight-bold" style="text-shadow: 3px 3px #28262c;">
      <i class="far fa-star mx-2"></i> 
      <!--- character name --->
      Name 
      <i class="far fa-star mx-2"></i>
    </h1>
  </div>
  <!--- content --->
  <div class="row no-gutters mx-n1 mt-1">
    <div class="col-md-2 p-1">
      <!--- tabs [DO NOT TOUCH] --->
      <ul class="nav nav-fill flex-row flex-md-column h-100">
        <li class="nav-item" style="background: #a5b0bd;">
          <a href="#ONE" data-toggle="tab" class="nav-link active justify-content-center align-items-center h-100">
            <i class="fas fa-star fa-2x" style="color: #efefef; text-shadow: 3px 3px #28262c;"></i>
          </a>
        </li>
        <li class="p-1"></li>
        <li class="nav-item" style="background: #a5b0bd;">
          <a href="#TWO" data-toggle="tab" class="nav-link justify-content-center align-items-center h-100">
            <i class="fas fa-book fa-2x" style="color: #efefef; text-shadow: 3px 3px #28262c;"></i>
          </a>
        </li>
        <li class="p-1"></li>
        <li class="nav-item" style="background: #a5b0bd;">
          <a href="#THREE" data-toggle="tab" class="nav-link justify-content-center align-items-center h-100">
            <i class="fas fa-paw fa-2x" style="color: #efefef; text-shadow: 3px 3px #28262c;"></i>
          </a>
        </li>
        <li class="p-1"></li>
        <li class="nav-item" style="background: #a5b0bd;">
          <a href="#FOUR" data-toggle="tab" class="nav-link justify-content-center align-items-center h-100">
            <i class="fas fa-palette fa-2x" style="color: #efefef; text-shadow: 3px 3px #28262c;"></i>
          </a>
        </li>
      </ul>
    </div>
    <div class="col-md-10 p-1">
      <div class="p-0" style="background: #28262c; color: #efefef;">
        <div class="tab-content">
          <!--- basics tab --->
          <div class="tab-pane active" id="ONE">
            <div class="overflow-auto p-md-3 p-2" style="height: 285px;">
              <div class="row no-gutters">
                <div class="col-md-5 p-md-1 p-4">
                  <!--- profile picture --->
                  <div style="background: url(IMGURL); background-size: cover; padding-top: 100%; border: 3px solid #b1ffc8; border-radius: 15px 0 0 15px;"></div>
                </div>
                <div class="col-md-7 p-md-3 p-1">
                  <!--- title --->
                  <h3 class="font-italic text-uppercase font-weight-bold"><i class="far fa-star mr-2"></i> General Info</h3>
                  <hr class="w-100 mt-0" style="border-top: 3px solid #b1ffc8;">
                  <!--- content --->
                  <div class="d-flex justify-content-between align-items-center mb-1">
                    <strong style="color: #a5b0bd;">Name</strong>
                    <span>Name</span>
                  </div>
                  <!--- content --->
                  <div class="d-flex justify-content-between align-items-center mb-1">
                    <strong style="color: #a5b0bd;">Gender</strong>
                    <span>Gender</span>
                  </div>
                  <!--- content --->
                  <div class="d-flex justify-content-between align-items-center mb-1">
                    <strong style="color: #a5b0bd;">Pronouns</strong>
                    <span>prn/prn</span>
                  </div>
                  <!--- content --->
                  <div class="d-flex justify-content-between align-items-center mb-1">
                    <strong style="color: #a5b0bd;">Orientation</strong>
                    <span>Orientation</span>
                  </div>
                  <!--- content --->
                  <div class="d-flex justify-content-between align-items-center mb-1">
                    <strong style="color: #a5b0bd;">Zodiac</strong>
                    <span>Zodiac</span>
                  </div>
                  <!--- content --->
                  <div class="d-flex justify-content-between align-items-center mb-1">
                    <strong style="color: #a5b0bd;">Species</strong>
                    <a href="LINK" style="color: #b1ffc8;">Species</a>
                  </div>
                  <!--- end of content --->
                </div>
              </div>
            </div>
          </div>
          <!--- story tab --->
          <div class="tab-pane" id="TWO">
            <div class="overflow-auto p-md-3 p-2" style="height: 285px;">
              <div class="row no-gutters">
                <div class="col-12 p-1">
                  <!--- title --->
                  <h3 class="font-italic text-uppercase font-weight-bold"><i class="far fa-book mr-2"></i> Bio</h3>
                  <hr class="w-100 mt-0" style="border-top: 3px solid #b1ffc8;">
                  <!--- bio text --->
                  <p>Morbi nec nisl maximus, fermentum felis at, ultrices elit. Quisque eu suscipit quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                  <!--- divider ---><div class="p-1"></div>
                </div>
                <div class="col-md-6 p-1">
                  <!--- title --->
                  <h5 class="font-italic text-uppercase font-weight-bold"><i class="far fa-heart mr-2"></i> Likes</h5>
                  <ul class="list-unstyled mb-0">
                    <!--- likes --->
                    <li><i class="far fa-chevron-right mr-1" style="color: #b1ffc8; font-size: .8rem;"></i> content</li>
                    <li><i class="far fa-chevron-right mr-1" style="color: #b1ffc8; font-size: .8rem;"></i> content</li>
                    <li><i class="far fa-chevron-right mr-1" style="color: #b1ffc8; font-size: .8rem;"></i> content</li>
                  </ul>
                </div>
                <div class="col-md-6 p-1">
                  <!--- title --->
                  <h5 class="font-italic text-uppercase font-weight-bold"><i class="far fa-heart-broken mr-2"></i> Dislikes</h5>
                  <ul class="list-unstyled mb-0">
                    <!--- dislikes --->
                    <li><i class="far fa-chevron-right mr-1" style="color: #b1ffc8; font-size: .8rem;"></i> content</li>
                    <li><i class="far fa-chevron-right mr-1" style="color: #b1ffc8; font-size: .8rem;"></i> content</li>
                    <li><i class="far fa-chevron-right mr-1" style="color: #b1ffc8; font-size: .8rem;"></i> content</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <!--- species info tab --->
          <div class="tab-pane" id="THREE">
            <div class="overflow-auto p-md-3 p-2" style="height: 285px;">
              <div class="row no-gutters">
                <div class="col-md-6 p-1">
                  <!--- title --->
                  <h5 class="font-italic text-uppercase font-weight-bold"><i class="far fa-link mr-2"></i> Links</h5>
                  <ul class="list-unstyled mb-0">
                    <!--- links --->
                    <li><i class="far fa-chevron-right mr-1" style="color: #b1ffc8; font-size: .8rem;"></i>
                      <a href="LINK" style="color: #b1ffc8;">@ designer</a>
                    </li>
                    <li><i class="far fa-chevron-right mr-1" style="color: #b1ffc8; font-size: .8rem;"></i>
                      <a href="LINK" style="color: #b1ffc8;">@ designer</a>
                    </li>
                    <li><i class="far fa-chevron-right mr-1" style="color: #b1ffc8; font-size: .8rem;"></i>
                      <a href="LINK" style="color: #b1ffc8;">@ designer</a>
                    </li>
                  </ul>
                </div>
                <div class="col-md-6 p-1">
                  <!--- title --->
                  <h5 class="font-italic text-uppercase font-weight-bold"><i class="far fa-paw mr-2"></i> Species Notes</h5>
                  <ul class="list-unstyled mb-0">
                    <!--- notes --->
                    <li><i class="far fa-chevron-right mr-1" style="color: #b1ffc8; font-size: .8rem;"></i> content</li>
                    <li><i class="far fa-chevron-right mr-1" style="color: #b1ffc8; font-size: .8rem;"></i> content</li>
                    <li><i class="far fa-chevron-right mr-1" style="color: #b1ffc8; font-size: .8rem;"></i> content</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <!--- design tab --->
          <div class="tab-pane" id="FOUR">
            <div class="overflow-auto p-md-3 p-2" style="height: 285px;">
              <div class="row no-gutters">
                <div class="col-md-6 p-md-1 pr-md-2 p-4">
                  <!--- color palette --->
                  <div class="row no-gutters mx-n1 mt-n1">
                    <!--- swatch --->
                    <div class="col-4 p-1">
                      <!--- color --->
                      <div style="background-color: #FFFFFF; padding-top: 100%;"></div>
                    </div>
                    <!--- swatch --->
                    <div class="col-4 p-1">
                      <!--- color --->
                      <div style="background-color: #FFFFFF; padding-top: 100%;"></div>
                    </div>
                    <!--- swatch --->
                    <div class="col-4 p-1">
                      <!--- color --->
                      <div style="background-color: #FFFFFF; padding-top: 100%;"></div>
                    </div>
                    <!--- swatch --->
                    <div class="col-4 p-1">
                      <!--- color --->
                      <div style="background-color: #FFFFFF; padding-top: 100%;"></div>
                    </div>
                    <!--- swatch --->
                    <div class="col-4 p-1">
                      <!--- color --->
                      <div style="background-color: #FFFFFF; padding-top: 100%;"></div>
                    </div>
                    <!--- swatch --->
                    <div class="col-4 p-1">
                      <!--- color --->
                      <div style="background-color: #FFFFFF; padding-top: 100%;"></div>
                    </div>
                    <!--- swatch --->
                    <div class="col-4 p-1">
                      <!--- color --->
                      <div style="background-color: #FFFFFF; padding-top: 100%;"></div>
                    </div>
                    <!--- swatch --->
                    <div class="col-4 p-1">
                      <!--- color --->
                      <div style="background-color: #FFFFFF; padding-top: 100%;"></div>
                    </div>
                    <!--- swatch --->
                    <div class="col-4 p-1">
                      <!--- color --->
                      <div style="background-color: #FFFFFF; padding-top: 100%;"></div>
                    </div>
                    <!--- end of swatches --->
                  </div>
                </div>
                <div class="col-md-6 p-1">
                  <!--- title --->
                  <h5 class="font-italic text-uppercase font-weight-bold"><i class="far fa-palette mr-2"></i> Design Notes</h5>
                  <ul class="list-unstyled mb-0">
                    <!--- notes --->
                    <li><i class="far fa-chevron-right mr-1" style="color: #b1ffc8; font-size: .8rem;"></i> content</li>
                    <li><i class="far fa-chevron-right mr-1" style="color: #b1ffc8; font-size: .8rem;"></i> content</li>
                    <li><i class="far fa-chevron-right mr-1" style="color: #b1ffc8; font-size: .8rem;"></i> content</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <!--- end of tabs --->
        </div>
      </div>
    </div>
  </div>
  <div class="text-right mt-n1"><small>code by @8byte</small></div>
</div>