Stor8

<!--- colors (ctrl f and replace all)
#1d3d3f - main font, box colors
#82a9ac - header font, inner box colors
#3e6062 - accent font
--->
<div class="container">
  <div class="row no-gutters">
    <div class="col-md-4 p-1">
      <div class="container p-2" style="background: #1d3d3f; border-radius: 10px;">
        <h1 class="d-flex text-uppercase" style="justify-content: space-between; align-items: flex-end; color: #82a9ac;">
          <span>Name</span>
          <i class="fas fa-star"></i>
        </h1>
        <div class="container p-2" style="background: #82a9ac; color: #1d3d3f; font-weight: 500; border-radius: 10px;">
          <!--- content --->
          <span class="d-flex" style="justify-content: space-between; align-items: baseline;">
            <span class="text-uppercase" style="color: #3e6062; font-size: 1.2rem; font-weight: bold;">name</span>
            <span>name</span>
          </span>
          <!--- content --->
          <span class="d-flex" style="justify-content: space-between; align-items: baseline;">
            <span class="text-uppercase" style="color: #3e6062; font-size: 1.2rem; font-weight: bold;">gender</span>
            <span>gender</span>
          </span>
          <!--- content --->
          <span class="d-flex" style="justify-content: space-between; align-items: baseline;">
            <span class="text-uppercase" style="color: #3e6062; font-size: 1.2rem; font-weight: bold;">age</span>
            <span>00</span>
          </span>
          <!--- content --->
          <span class="d-flex" style="justify-content: space-between; align-items: baseline;">
            <span class="text-uppercase" style="color: #3e6062; font-size: 1.2rem; font-weight: bold;">s/o</span>
            <span>orientation</span>
          </span>
          <!--- content --->
          <span class="d-flex" style="justify-content: space-between; align-items: baseline;">
            <span class="text-uppercase" style="color: #3e6062; font-size: 1.2rem; font-weight: bold;">level</span>
            <span>00</span>
          </span>
          <!--- content --->
          <span class="d-flex" style="justify-content: space-between; align-items: baseline;">
            <span class="text-uppercase" style="color: #3e6062; font-size: 1.2rem; font-weight: bold;">type</span>
            <span>type</span>
          </span>
          <!--- content --->
          <span class="d-flex" style="justify-content: space-between; align-items: baseline;">
            <span class="text-uppercase" style="color: #3e6062; font-size: 1.2rem; font-weight: bold;">ability</span>
            <span>ability</span>
          </span>
          <!--- content --->
          <span class="d-flex" style="justify-content: space-between; align-items: baseline;">
            <span class="text-uppercase" style="color: #3e6062; font-size: 1.2rem; font-weight: bold;">held item</span>
            <span>item</span>
          </span>
        </div>
      </div>
      <div class="container p-2 mt-2" style="background: #1d3d3f; border-radius: 10px;">
        <h1 class="d-flex text-uppercase" style="justify-content: space-between; align-items: flex-end; color: #82a9ac;">
          <span>Moves</span>
          <i class="fas fa-bone" style="transform: rotate(-45deg);"></i>
        </h1>
        <div class="container overflow-auto p-2" style="background: #82a9ac; color: #1d3d3f; font-weight: 500; border-radius: 10px; height: 317px;">
          <!--- move --->
          <h1 class="text-uppercase" style="color: #3e6062; font-weight: normal; font-size: 1.5rem;">Move 1</h1>
          <p class="pl-4">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.
          </p>
          <!--- move --->
          <h1 class="text-uppercase" style="color: #3e6062; font-weight: normal; font-size: 1.5rem;">Move 2</h1>
          <p class="pl-4">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.
          </p>
          <!--- move --->
          <h1 class="text-uppercase" style="color: #3e6062; font-weight: normal; font-size: 1.5rem;">Move 3</h1>
          <p class="pl-4">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.
          </p>
          <!--- end moves --->
        </div>
      </div>
    </div>
    <div class="col-md-4 p-1 text-center">
      <!--- background --->
      <div class="container p-2" style="background: #1d3d3f; border-radius: 10px; position: absolute; top: 100px; width: calc(100% - .5rem);">
        <h1 class="d-flex text-uppercase" style="justify-content: space-between; align-items: flex-end; color: #82a9ac;">
          <i class="fas fa-bowling-ball"></i>
        </h1>
        <div class="container" style="background: #82a9ac; color: #1d3d3f; border-radius: 10px; height: 200px;"></div>
      </div>
      <!--- image --->
      <img src="IMGURL" style="height: 500px;">
      <!--- stats --->
      <div class="container p-2 mt-2" style="background: #1d3d3f; border-radius: 10px;">
        <h1 class="d-flex text-uppercase" style="justify-content: space-between; align-items: flex-end; color: #82a9ac;">
          <span>Stats</span>
          <i class="fas fa-triangle"></i>
        </h1>
        <div class="container overflow-auto p-2 text-left" style="background: #82a9ac; color: #1d3d3f; font-weight: 500; border-radius: 10px;">
          <div class="row no-gutters">
            <div class="col-md-6 p-1">
              <!--- stat --->
              <span class="d-flex" style="justify-content: space-between; align-items: baseline;">
                <span class="text-uppercase" style="color: #3e6062; font-size: 1.2rem; font-weight: bold;">HP</span>
                <span>00</span>
              </span>
              <!--- stat --->
              <span class="d-flex" style="justify-content: space-between; align-items: baseline;">
                <span class="text-uppercase" style="color: #3e6062; font-size: 1.2rem; font-weight: bold;">ATK</span>
                <span>00</span>
              </span>
              <!--- stat --->
              <span class="d-flex" style="justify-content: space-between; align-items: baseline;">
                <span class="text-uppercase" style="color: #3e6062; font-size: 1.2rem; font-weight: bold;">DEF</span>
                <span>00</span>
              </span>
            </div>
            <div class="col-md-6 p-1">
              <!--- stat --->
              <span class="d-flex" style="justify-content: space-between; align-items: baseline;">
                <span class="text-uppercase" style="color: #3e6062; font-size: 1.2rem; font-weight: bold;">SP.ATK</span>
                <span>00</span>
              </span>
              <!--- stat --->
              <span class="d-flex" style="justify-content: space-between; align-items: baseline;">
                <span class="text-uppercase" style="color: #3e6062; font-size: 1.2rem; font-weight: bold;">SP.DEF</span>
                <span>00</span>
              </span>
              <!--- stat --->
              <span class="d-flex" style="justify-content: space-between; align-items: baseline;">
                <span class="text-uppercase" style="color: #3e6062; font-size: 1.2rem; font-weight: bold;">SPEED</span>
                <span>00</span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4 p-1">
      <div class="container p-2" style="background: #1d3d3f; border-radius: 10px;">
        <h1 class="d-flex text-uppercase" style="justify-content: space-between; align-items: flex-end; color: #82a9ac;">
          <span>Info</span>
          <i class="fas fa-heart"></i>
        </h1>
        <div class="container overflow-auto p-2" style="background: #82a9ac; color: #1d3d3f; font-weight: 500; border-radius: 10px; height: 617.5px;">
          <!--- bio --->
          <h1 class="text-uppercase" style="color: #3e6062; font-weight: normal; font-size: 1.5rem;">Biography</h1>
          <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.
          </p>
          <!--- backstory --->
          <h1 class="text-uppercase" style="color: #3e6062; font-weight: normal; font-size: 1.5rem;">Backstory</h1>
          <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.
          </p>
          <h1 class="text-uppercase" style="color: #3e6062; font-weight: normal; font-size: 1.5rem;">Trivia</h1>
          <p>
            <!--- trivia --->
            <ul>
              <li>content</li>
              <li>content</li>
              <li>content</li>
              <li>content</li>
              <li>content</li>
            </ul>
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="text-right"><a href="/8byte" class="tooltipster" title="code credits" data-placement="bottom"><i class="fas fa-crow"></i></a></div>
</div>