Stor8

<!---
==== Nikki
==== HTML by 8byte
----
==== Colors
---- For easier changes, use Ctrl F and then
---- click the plus icon at the bottom to 
---- replace all.
====
#ffb1cb - primary accent
#92e1ff - secondary accent
#efefef - main accent font
--->
<div class="container" style="max-width: 800px;">
  <div class="container" style="height: 40px; z-index: -2;"></div>
  <!--- banner image --->
  <div class="container justify-content-center" style="background:url(IMGURL); background-size: cover; background-attachment: fixed; height: 100px;">
    <div class="card justify-content-center align-items-center rounded-circle border-0" style="height: 155px; width: 155px; position: absolute; top: -30px; z-index: 3;">
      <!--- profile picture --->
      <div class="card rounded-circle" style="background:url(IMGURL); background-size: cover; height: 140px; width: 140px; border: 8px solid #ffb1cb;"></div>
    </div>
  </div>
  <div class="container my-2" style="background:#92e1ff; height: 12px;"></div>
  <!--- information sections begin --->
  <div class="row no-gutters">
    <!--- main information --->
    <div class="order-md-1 order-2 col-md-4 col-12 pr-md-1 mt-md-0 mt-2">
      <div class="d-flex container align-items-end p-0" style="background:#ffb1cb; color: #efefef;">
        <i class="far fa-heartbeat" style="transform:rotate(-30deg); opacity: 0.3; font-size: 34px;"></i>
        <h1 style="font-weight: bold; margin-left: -15px;">information</h1>
      </div>
      <div class="container mt-2 p-2" style="border: 8px solid #92e1ff; height: 500px;">
        <div class="container p-1" style="background:#ffb1cb; color: #efefef;">
          <!--- character name --->
          <h3 class="my-auto" style="text-transform: lowercase;">Character Name</h3>
        </div>
        <hr class="mt-1 mb-0" style="border: 4px solid #92e1ff;">
        <!--- info section 1 --->
        <div class="row no-gutters">
          <!--- content --->
          <div class="col-5 pr-md-1 my-1">
            <span class="btn w-100 rounded-0" style="background:#ffb1cb; color: #efefef;">species</span>
          </div>
          <div class="col-7 pl-md-1 my-1">
            <span class="btn text-left w-100 rounded-0" style="border:1px solid #ffb1cb;">species</span>
          </div>
          <!--- content --->
          <div class="col-5 pr-md-1 my-1">
            <span class="btn w-100 rounded-0" style="background:#ffb1cb; color: #efefef;">gender</span>
          </div>
          <div class="col-7 pl-md-1 my-1">
            <span class="btn text-left w-100 rounded-0" style="border:1px solid #ffb1cb;">gender</span>
          </div>
          <!--- content --->
          <div class="col-5 pr-md-1 my-1">
            <span class="btn w-100 rounded-0" style="background:#ffb1cb; color: #efefef;">sexuality</span>
          </div>
          <div class="col-7 pl-md-1 my-1">
            <span class="btn text-left w-100 rounded-0" style="border:1px solid #ffb1cb;">sexuality</span>
          </div>
          <!--- content --->
          <div class="col-5 pr-md-1 my-1">
            <span class="btn w-100 rounded-0" style="background:#ffb1cb; color: #efefef;">birthday</span>
          </div>
          <div class="col-7 pl-md-1 my-1">
            <span class="btn text-left w-100 rounded-0" style="border:1px solid #ffb1cb;">birthday</span>
          </div>
          <!--- end of content --->
        </div>
        <hr class="my-0" style="border: 4px solid #92e1ff;">
        <!--- info section 2 --->
        <div class="row no-gutters">
          <!--- content --->
          <div class="col-5 pr-md-1 my-1">
            <span class="btn w-100 rounded-0" style="background:#ffb1cb; color: #efefef;">worth</span>
          </div>
          <div class="col-7 pl-md-1 my-1">
            <span class="btn text-left w-100 rounded-0" style="border:1px solid #ffb1cb;">worth</span>
          </div>
          <!--- content --->
          <div class="col-5 pr-md-1 my-1">
            <span class="btn w-100 rounded-0" style="background:#ffb1cb; color: #efefef;">owner</span>
          </div>
          <div class="col-7 pl-md-1 my-1">
            <span class="btn text-left w-100 rounded-0" style="border:1px solid #ffb1cb;">@owner</span>
          </div>
          <!--- content --->
          <div class="col-5 pr-md-1 my-1">
            <span class="btn w-100 rounded-0" style="background:#ffb1cb; color: #efefef;">designer</span>
          </div>
          <div class="col-7 pl-md-1 my-1">
            <span class="btn text-left w-100 rounded-0" style="border:1px solid #ffb1cb;">@designer</span>
          </div>
          <!--- content --->
          <div class="col-5 pr-md-1 my-1">
            <span class="btn w-100 rounded-0" style="background:#ffb1cb; color: #efefef;">status</span>
          </div>
          <div class="col-7 pl-md-1 my-1">
            <span class="btn text-left w-100 rounded-0" style="border:1px solid #ffb1cb;">status</span>
          </div>
          <!--- end of content --->
        </div>
        <div class="container overflow-auto" style="height: 70px;">
          <i class="far fa-quote-left" style="transform:rotate(-30deg); opacity: 0.3; font-size: 34px; color:#92e1ff;"></i>
          <!--- quote --->
          <span style="margin-left: -30px; font-size: 18px;">
            Include a short quote or brief summary here.
          </span>
        </div>
      </div>
    </div>
    <!--- wardrobe --->
    <div class="order-md-2 order-1 col-md-4 col-12 px-md-1">
      <div class="d-flex container align-items-end p-0" style="background:#92e1ff; color: #efefef;">
        <i class="far fa-crown" style="transform:rotate(-30deg); opacity: 0.3; font-size: 34px;"></i>
        <h1 style="font-weight: bold; margin-left: -20px;">wardrobe</h1>
      </div>
      <!--- outfit carousel --->
      <div class="container mt-2 p-2" style="border: 8px solid #ffb1cb; height: 500px;">
        <div id="wardrobe" class="carousel slide mx-auto p-1 h-100 w-100" data-ride="carousel">
          <div class="carousel-inner h-100 w-100">
            <!--- outfit --->
            <div class="carousel-item active h-100 w-100">
              <!--- image --->
              <div class="h-100 w-100" style="background-image:url(IMGURL); background-position:center center; background-size:cover"></div>
              <div class="carousel-caption d-none d-md-block">
                <div class="p-1" style="background:#ffb1cb; color:#efefef;">
                  <!--- short outfit description --->
                  <span style="font-size:15px;">outfit description</span>
                </div>
              </div>
            </div>
            <!--- outfit --->
            <div class="carousel-item h-100 w-100">
              <!--- image --->
              <div class="h-100 w-100" style="background-image:url(IMGURL); background-position:center center; background-size:cover"></div>
              <div class="carousel-caption d-none d-md-block">
                <div class="p-1" style="background:#ffb1cb; color:#efefef;">
                  <!--- short outfit description --->
                  <span style="font-size:15px;">outfit description</span>
                </div>
              </div>
            </div>
            <!--- outfit --->
            <div class="carousel-item h-100 w-100">
              <!--- image --->
              <div class="h-100 w-100" style="background-image:url(IMGURL); background-position:center center; background-size:cover"></div>
              <div class="carousel-caption d-none d-md-block">
                <div class="p-1" style="background:#ffb1cb; color:#efefef;">
                  <!--- short outfit description --->
                  <span style="font-size:15px;">outfit description</span>
                </div>
              </div>
            </div>
            <!--- end of outfits, you can paste more before this line if needed --->
          </div>
          <a class="carousel-control-prev" href="#wardrobe" role="button" data-slide="prev">
            <i class="fas fa-caret-left fa-3x" style="color:#ffb1cb;"></i>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#wardrobe" role="button" data-slide="next">
            <i class="fas fa-caret-right fa-3x" style="color:#ffb1cb;"></i>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>
    <!--- backstory --->
    <div class="order-3 col-md-4 col-12 pl-md-1 mt-md-0 mt-2">
      <div class="d-flex container align-items-end p-0" style="background:#ffb1cb; color: #efefef;">
        <i class="far fa-book" style="transform:rotate(-30deg); opacity: 0.3; font-size: 34px;"></i>
        <h1 style="font-weight: bold; margin-left: -15px;">backstory</h1>
      </div>
      <div class="container mt-2 p-2" style="border: 8px solid #92e1ff; height: 500px;">
        <!--- personality title --->
        <div class="container p-1" style="background:#ffb1cb; color: #efefef;">
          <h3 class="my-auto" style="text-transform: lowercase;">Personality</h3>
        </div>
        <div class="container p-0 overflow-auto" style="height: 110px;">
          <!--- personality --->
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
        <hr class="my-1" style="border: 4px solid #92e1ff;">
        <!--- history title --->
        <div class="container p-1" style="background:#ffb1cb; color: #efefef;">
          <h3 class="my-auto" style="text-transform: lowercase;">History</h3>
        </div>
        <div class="container p-0 overflow-auto" style="height: 150px;">
          <!--- history --->
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
        <hr class="my-1" style="border: 4px solid #92e1ff;">
        <!--- design notes title --->
        <div class="container p-1" style="background:#ffb1cb; color: #efefef;">
          <h3 class="my-auto" style="text-transform: lowercase;">Design Notes</h3>
        </div>
        <div class="container p-0 overflow-auto" style="height: 90px;">
          <ul class="p-0">
            <!--- design notes --->
            <li><i class="fas fa-chevron-right mr-2" style="color: #92e1ff;"></i> Bullet</li>
            <li><i class="fas fa-chevron-right mr-2" style="color: #92e1ff;"></i> Bullet</li>
            <li><i class="fas fa-chevron-right mr-2" style="color: #92e1ff;"></i> Bullet</li>
            <li><i class="fas fa-chevron-right mr-2" style="color: #92e1ff;"></i> Bullet</li>
            <li><i class="fas fa-chevron-right mr-2" style="color: #92e1ff;"></i> Bullet</li>
            <li><i class="fas fa-chevron-right mr-2" style="color: #92e1ff;"></i> Bullet</li>
            <li><i class="fas fa-chevron-right mr-2" style="color: #92e1ff;"></i> Bullet</li>
            <li><i class="fas fa-chevron-right mr-2" style="color: #92e1ff;"></i> Bullet</li>
          </ul>
        </div>
      </div>
    </div>
    <!--- relationships --->
    <!--- relationship --->
    <div class="order-4 col-md-4 col-12 pr-md-1 mt-2">
      <div class="d-flex container p-0" style="background: #ffb1cb; color: #efefef;">
        <i class="far fa-ribbon" style="transform:rotate(-30deg); opacity: 0.3; font-size: 28px;"></i>
        <h3 style="font-weight: bold; margin-left: -15px; margin-top: 3px;">
          <!--- character link and name --->
          <a href="LINK" style="color: #efefef;">Character Name</a>
        </h3>
      </div>
      <div class="container align-items-end justify-content-center mt-2 p-2" style="border: 8px solid #92e1ff; height: 150px;">
        <!--- character image --->
        <div class="w-100 h-100 align-items-end justify-content-end px-2" style="background:url(IMGURL); background-size: cover;">
          <div>
            <!--- character link --->
            <a class="tooltipster" title="relationship" href="LINK" style="color: #ffb1cb"><i class="fas fa-link"></i></a>
          </div>
        </div>
      </div>
    </div>
    <!--- relationship --->
    <div class="order-5 col-md-4 col-12 px-md-1 mt-2">
      <div class="d-flex container p-0" style="background: #92e1ff; color: #efefef;">
        <i class="far fa-ribbon" style="transform:rotate(-30deg); opacity: 0.3; font-size: 28px;"></i>
        <h3 style="font-weight: bold; margin-left: -15px; margin-top: 3px;">
          <!--- character link and name --->
          <a href="LINK" style="color: #efefef;">Character Name</a>
        </h3>
      </div>
      <div class="container align-items-end justify-content-center mt-2 p-2" style="border: 8px solid #ffb1cb; height: 150px;">
        <!--- character image --->
        <div class="w-100 h-100 align-items-end justify-content-end px-2" style="background:url(IMGURL); background-size: cover;">
          <div>
            <!--- character link --->
            <a class="tooltipster" title="relationship" href="LINK" style="color: #92e1ff"><i class="fas fa-link"></i></a>
          </div>
        </div>
      </div>
    </div>
    <!--- relationship --->
    <div class="order-6 col-md-4 col-12 pr-md-1 mt-2">
      <div class="d-flex container p-0" style="background: #ffb1cb; color: #efefef;">
        <i class="far fa-ribbon" style="transform:rotate(-30deg); opacity: 0.3; font-size: 28px;"></i>
        <h3 style="font-weight: bold; margin-left: -15px; margin-top: 3px;">
          <!--- character link and name --->
          <a href="LINK" style="color: #efefef;">Character Name</a>
        </h3>
      </div>
      <div class="container align-items-end justify-content-center mt-2 p-2" style="border: 8px solid #92e1ff; height: 150px;">
        <!--- character image --->
        <div class="w-100 h-100 align-items-end justify-content-end px-2" style="background:url(IMGURL); background-size: cover;">
          <div>
            <!--- character link --->
            <a class="tooltipster" title="relationship" href="LINK" style="color: #ffb1cb"><i class="fas fa-link"></i></a>
          </div>
        </div>
      </div>
    </div>
    <!--- end of relationships --->
  </div>
  <div class="text-right"><a class="tooltipster" title="layout credits" href="/TNR" data-placement="bottom"><i class="fas fa-star"></i></a> / <a class="tooltipster" title="code credits" href="/8byte" data-placement="bottom"><i class="fas fa-crow"></i></a></div>
</div>