Stor8

<!---
==== Luna
==== HTML by 8byte
----
==== Accent
---- For easier changes, use Ctrl F and then
---- click the plus icon at the bottom to 
---- replace all.
====
#ffffff - main accent
--->
<div class="container p-0" style="max-width: 1000px;">
  <div class="row no-gutters mx-n1">
    <div class="col-12 p-1">
      <!--- banner --->
      <div class="container" style="background:url(https://64.media.tumblr.com/6840374c0ee76a26f1c0fb815159423b/0c9c2889b2ee37b2-85/s1280x1920/f47fd8eb4086b845eecc12c82b7ed6a0ee94cfe6.jpg); background-size: cover; background-position: 0 -400px; height: 250px;"></div>
    </div>
    <!--- color palette --->
    <div class="col p-1"><div style="background: #757899; height: 50px;"></div></div>
    <div class="col p-1"><div style="background: #866485; height: 50px;"></div></div>
    <div class="col p-1"><div style="background: #211e85; height: 50px;"></div></div>
    <div class="col p-1"><div style="background: #939379; height: 50px;"></div></div>
    <!--- end of colors --->
   </div>
   <div class="row no-gutters mx-n1">
    <div class="col-md-3 col-6 flex-md-column order-1 p-1">
      <!--- profile picture --->
      <div style="background: url(https://i.pinimg.com/564x/ab/22/85/ab22854ca02ef7eb9800050eea0a4c6e.jpg); background-size: cover; padding-top: 100%;"></div>
      <!--- divider ---><div class="p-1"></div>
      <!--- name card --->
      <div class="bg-faded p-1" style="position: relative;">
        <h1 class="mb-0" style="position: relative; z-index: 1;">Name...</h1>
        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #ffffff 0%, rgba(0,0,0,0) 100%); z-index: 0;"></div>
      </div>
      <div class="overflow-auto" style="max-height: 290px; font-size: 1rem;">
        <!--- content --->
        <div class="row no-gutters my-2">
          <div class="order-md-1 order-2 col-md-6 col-12 p-1">Nickname</div>
          <div class="order-md-2 order-1 col-md-6 col-12 p-1 text-right bg-faded" style="position: relative;">
            <strong style="position: relative; z-index: 1;">Nickname</strong>
            <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0,0,0,0) 0%, #ffffff 100%); z-index: 0;"></div>
          </div>
        </div>
        <!--- content --->
        <div class="row no-gutters my-2">
          <div class="order-md-1 order-2 col-md-6 col-12 p-1">Gender</div>
          <div class="order-md-2 order-1 col-md-6 col-12 p-1 text-right bg-faded" style="position: relative;">
            <strong style="position: relative; z-index: 1;">Gender</strong>
            <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0,0,0,0) 0%, #ffffff 100%); z-index: 0;"></div>
          </div>
        </div>
        <!--- content --->
        <div class="row no-gutters my-2">
          <div class="order-md-1 order-2 col-md-6 col-12 p-1">Pronouns</div>
          <div class="order-md-2 order-1 col-md-6 col-12 p-1 text-right bg-faded" style="position: relative;">
            <strong style="position: relative; z-index: 1;">Pronouns</strong>
            <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0,0,0,0) 0%, #ffffff 100%); z-index: 0;"></div>
          </div>
        </div>
        <!--- content --->
        <div class="row no-gutters my-2">
          <div class="order-md-1 order-2 col-md-6 col-12 p-1">Birthday</div>
          <div class="order-md-2 order-1 col-md-6 col-12 p-1 text-right bg-faded" style="position: relative;">
            <strong style="position: relative; z-index: 1;">Birthday</strong>
            <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0,0,0,0) 0%, #ffffff 100%); z-index: 0;"></div>
          </div>
        </div>
        <!--- content --->
        <div class="row no-gutters my-2">
          <div class="order-md-1 order-2 col-md-6 col-12 p-1">Species</div>
          <div class="order-md-2 order-1 col-md-6 col-12 p-1 text-right bg-faded" style="position: relative;">
            <strong style="position: relative; z-index: 1;">Species</strong>
            <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0,0,0,0) 0%, #ffffff 100%); z-index: 0;"></div>
          </div>
        </div>
        <!--- content --->
        <div class="row no-gutters my-2">
          <div class="order-md-1 order-2 col-md-6 col-12 p-1">Occupation</div>
          <div class="order-md-2 order-1 col-md-6 col-12 p-1 text-right bg-faded" style="position: relative;">
            <strong style="position: relative; z-index: 1;">Occupation</strong>
            <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0,0,0,0) 0%, #ffffff 100%); z-index: 0;"></div>
          </div>
        </div>
        <!--- content --->
        <div class="row no-gutters my-2">
          <div class="order-md-1 order-2 col-md-6 col-12 p-1">Residence</div>
          <div class="order-md-2 order-1 col-md-6 col-12 p-1 text-right bg-faded" style="position: relative;">
            <strong style="position: relative; z-index: 1;">Residence</strong>
            <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0,0,0,0) 0%, #ffffff 100%); z-index: 0;"></div>
          </div>
        </div>
        <!--- end of content --->
      </div>
    </div>
    <div class="col-md-6 order-md-2 order-3 p-1">
      <!--- summary --->
      <h1>i. summary</h1>
      <div class="overflow-auto" style="height: 150px;">
        <p>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.</p>
      </div>
      <!--- divider ---><div class="p-1"></div>
      <!--- backstory --->
      <h1>ii. backstory</h1>
      <div class="overflow-auto" style="height: 150px;">
        <p>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.</p>
      </div>
      <!--- divider ---><div class="p-1"></div>
      <!--- personality --->
      <h1>iii. personality</h1>
      <div class="overflow-auto" style="height: 150px;">
        <p>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.</p>
      </div>
    </div>
    <div class="col-md-3 col-6 order-md-3 order-2 p-1">
      <!--- design notes --->
      <div class="overflow-auto" style="height: 290px;">
        <ul class="list-unstyled mb-0" style="font-size: 1rem;">
          <li><i class="fas fa-moon mr-2" style="font-size: .8rem;"></i> Integer porttitor suscipit ex.</li>
          <li><i class="fas fa-moon mr-2" style="font-size: .8rem;"></i> Integer porttitor suscipit ex.</li>
          <li><i class="fas fa-moon mr-2" style="font-size: .8rem;"></i> Integer porttitor suscipit ex.</li>
          <li><i class="fas fa-moon mr-2" style="font-size: .8rem;"></i> Integer porttitor suscipit ex. Vestibulum elit tortor, vehicula a diam at, pulvinar condimentum augue.</li>
          <li><i class="fas fa-moon mr-2" style="font-size: .8rem;"></i> Integer porttitor suscipit ex. Vestibulum elit tortor, vehicula a diam at, pulvinar condimentum augue.</li>
        </ul>
      </div>
      <!--- divider ---><div class="p-1"></div>
      <!--- cutie mark card --->
      <div class="bg-faded p-1" style="position: relative;">
        <h1 class="mb-0" style="position: relative; z-index: 1;">Cutie Mark</h1>
        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #ffffff 0%, rgba(0,0,0,0) 100%); z-index: 0;"></div>
      </div>
      <!--- divider ---><div class="p-1"></div>
      <!--- cutie mark --->
      <div style="background: url(https://i.pinimg.com/originals/fc/b1/d6/fcb1d6908a3692738f9318b18deea1dd.jpg); background-size: cover; padding-top: 100%;"></div>
    </div>
  </div>
  <div class="row no-gutters mx-n1">
    <!--- relationship --->
    <div class="col-md-3 col-6 p-1">
      <div class="bg-faded p-1" style="position: relative;">
        <!--- character name and link --->
        <h5 class="text-right mb-0" style="position: relative; z-index: 1;"><a href="LINK">name</a></h5>
        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0,0,0,0) 0%, #ffffff 100%); z-index: 0;"></div>
      </div>
      <!--- divider ---><div class="p-1"></div>
      <!--- character image --->
      <div style="background: url(https://64.media.tumblr.com/8e3134d376a15616f1e23ef820e25ca6/b65be21a41275b30-3f/s640x960/3ee8db21bbae4ddfffa8b415e81b5191c58e919b.jpg); background-size: cover;">
        <!--- link to character --->
        <a href="LINK" class="d-block w-100" style="padding-top: 100%;"></a>
      </div>
      <!--- divider ---><div class="p-1"></div>
      <div class="bg-faded p-1" style="position: relative;">
        <!--- relationship --->
        <h5 class="text-primary mb-0" style="position: relative; z-index: 1;">relationship</h5>
        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #ffffff 0%, rgba(0,0,0,0) 100%); z-index: 0;"></div>
      </div>
    </div>
    <!--- relationship --->
    <div class="col-md-3 col-6 p-1">
      <div class="bg-faded p-1" style="position: relative;">
        <!--- character name and link --->
        <h5 class="text-right mb-0" style="position: relative; z-index: 1;"><a href="LINK">name</a></h5>
        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0,0,0,0) 0%, #ffffff 100%); z-index: 0;"></div>
      </div>
      <!--- divider ---><div class="p-1"></div>
      <!--- character image --->
      <div style="background: url(https://64.media.tumblr.com/8e3134d376a15616f1e23ef820e25ca6/b65be21a41275b30-3f/s640x960/3ee8db21bbae4ddfffa8b415e81b5191c58e919b.jpg); background-size: cover;">
        <!--- link to character --->
        <a href="LINK" class="d-block w-100" style="padding-top: 100%;"></a>
      </div>
      <!--- divider ---><div class="p-1"></div>
      <div class="bg-faded p-1" style="position: relative;">
        <!--- relationship --->
        <h5 class="text-primary mb-0" style="position: relative; z-index: 1;">relationship</h5>
        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #ffffff 0%, rgba(0,0,0,0) 100%); z-index: 0;"></div>
      </div>
    </div>
    <!--- relationship --->
    <div class="col-md-3 col-6 p-1">
      <div class="bg-faded p-1" style="position: relative;">
        <!--- character name and link --->
        <h5 class="text-right mb-0" style="position: relative; z-index: 1;"><a href="LINK">name</a></h5>
        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0,0,0,0) 0%, #ffffff 100%); z-index: 0;"></div>
      </div>
      <!--- divider ---><div class="p-1"></div>
      <!--- character image --->
      <div style="background: url(https://64.media.tumblr.com/8e3134d376a15616f1e23ef820e25ca6/b65be21a41275b30-3f/s640x960/3ee8db21bbae4ddfffa8b415e81b5191c58e919b.jpg); background-size: cover;">
        <!--- link to character --->
        <a href="LINK" class="d-block w-100" style="padding-top: 100%;"></a>
      </div>
      <!--- divider ---><div class="p-1"></div>
      <div class="bg-faded p-1" style="position: relative;">
        <!--- relationship --->
        <h5 class="text-primary mb-0" style="position: relative; z-index: 1;">relationship</h5>
        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #ffffff 0%, rgba(0,0,0,0) 100%); z-index: 0;"></div>
      </div>
    </div>
    <!--- relationship --->
    <div class="col-md-3 col-6 p-1">
      <div class="bg-faded p-1" style="position: relative;">
        <!--- character name and link --->
        <h5 class="text-right mb-0" style="position: relative; z-index: 1;"><a href="LINK">name</a></h5>
        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0,0,0,0) 0%, #ffffff 100%); z-index: 0;"></div>
      </div>
      <!--- divider ---><div class="p-1"></div>
      <!--- character image --->
      <div style="background: url(https://64.media.tumblr.com/8e3134d376a15616f1e23ef820e25ca6/b65be21a41275b30-3f/s640x960/3ee8db21bbae4ddfffa8b415e81b5191c58e919b.jpg); background-size: cover;">
        <!--- link to character --->
        <a href="LINK" class="d-block w-100" style="padding-top: 100%;"></a>
      </div>
      <!--- divider ---><div class="p-1"></div>
      <div class="bg-faded p-1" style="position: relative;">
        <!--- relationship --->
        <h5 class="text-primary mb-0" style="position: relative; z-index: 1;">relationship</h5>
        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #ffffff 0%, rgba(0,0,0,0) 100%); z-index: 0;"></div>
      </div>
    </div>
    <!--- end of relationships --->
  </div>
  <div class="text-right"><small>layout by @TNR | code by @8byte</small></div>
</div>