Stor8

<!---
==== Louboutin (HTML)
==== HTML by 8byte
----
==== Colors
---- This code uses bootstrap colors.
--->
<div class="container p-0">
  <!--- world header info --->
  <div class="card bg-faded border-0 p-md-3 p-2">
    <h1 class="display-4 font-weight-normal font-italic text-uppercase mb-0">Species Name</h1>
    <hr class="w-100 my-2">
    <h5 class="text-lowercase text-right mb-0">species tagline</h5>
  </div>
  <ul class="nav my-2 mx-auto" style="max-width: 650px;">
    <li class="nav-item w-100 m-1"><a href="#ONE" data-toggle="tab" class="nav-link active btn btn-primary text-uppercase font-weight-bold">Welcome</a></li>
    <li class="nav-item w-100 m-1"><a href="#TWO" data-toggle="tab" class="nav-link btn btn-primary text-uppercase font-weight-bold">Rules</a></li>
    <li class="nav-item w-100 m-1"><a href="#THREE" data-toggle="tab" class="nav-link btn btn-primary text-uppercase font-weight-bold">Lore and Traits</a></li>
    <li class="nav-item w-100 m-1"><a href="#FOUR" data-toggle="tab" class="nav-link btn btn-primary text-uppercase font-weight-bold">Shop</a></li>
    <li class="nav-item m-1"><a href="/8byte" class="btn btn-primary"><i class="fas fa-code"></i></a></li>
  </ul>
  <div class="tab-content">
    <!--- welcome tab --->
    <div class="tab-pane active" id="ONE">
      <div class="row no-gutters m-n2">
        <div class="col-md-7 p-2">
          <div class="card bg-faded border-0 p-md-3 p-2">
            <h3 class="text-capitalize mb-0">general info</h3>
            <hr class="w-100 my-2">
            <!--- welcome general info --->
            <div class="overflow-auto" style="max-height: 150px;">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mattis velit mattis pretium elementum. Ut fermentum pulvinar sapien. Morbi mollis finibus feugiat. Donec quis porta felis, eu placerat leo. Sed congue fermentum rutrum. Curabitur lobortis iaculis felis, at ullamcorper elit fringilla ut. Nam vestibulum scelerisque felis, eu semper purus porttitor nec. Aenean porta est iaculis nisi accumsan interdum.</p>
            </div>
          </div>
          <div class="card bg-faded border-0 p-md-3 p-2 my-3" style="font-size: 1.2rem;">
            <div class="d-flex" style="justify-content: space-around;">
              <!--- other social media links --->
              <a href="LINK"><i class="fab fa-discord fa-fw"></i></a>
              <a href="LINK"><i class="fab fa-deviantart fa-fw"></i></a>
              <a href="LINK"><i class="fab fa-twitter fa-fw"></i></a>
              <a href="LINK"><i class="fas fa-link fa-fw"></i></a>
            </div>
          </div>
          <div class="card bg-faded border-0 p-md-3 p-2">
            <h3 class="text-capitalize mb-0">staff</h3>
            <hr class="w-100 my-2">
            <div class="row no-gutters">
              <!--- staff --->
              <div class="col-md-3 col-6 p-1 d-flex flex-column align-items-center">
                <!--- staff member picture --->
                <div class="rounded-circle w-100" style="background: url(IMGURL); background-size: cover;">
                  <!--- link to staff member --->
                  <a href="LINK" class="d-block w-100" style="padding-top: 100%;"></a>
                </div>
                <!--- staff info --->
                <h3 class="mt-2">@username</h3>
                <small>[ role in the world ]</small>
              </div>
              <!--- staff --->
              <div class="col-md-3 col-6 p-1 d-flex flex-column align-items-center">
                <!--- staff member picture --->
                <div class="rounded-circle w-100" style="background: url(IMGURL); background-size: cover;">
                  <!--- link to staff member --->
                  <a href="LINK" class="d-block w-100" style="padding-top: 100%;"></a>
                </div>
                <!--- staff info --->
                <h3 class="mt-2">@username</h3>
                <small>[ role in the world ]</small>
              </div>
              <!--- staff --->
              <div class="col-md-3 col-6 p-1 d-flex flex-column align-items-center">
                <!--- staff member picture --->
                <div class="rounded-circle w-100" style="background: url(IMGURL); background-size: cover;">
                  <!--- link to staff member --->
                  <a href="LINK" class="d-block w-100" style="padding-top: 100%;"></a>
                </div>
                <!--- staff info --->
                <h3 class="mt-2">@username</h3>
                <small>[ role in the world ]</small>
              </div>
              <!--- staff --->
              <div class="col-md-3 col-6 p-1 d-flex flex-column align-items-center">
                <!--- staff member picture --->
                <div class="rounded-circle w-100" style="background: url(IMGURL); background-size: cover;">
                  <!--- link to staff member --->
                  <a href="LINK" class="d-block w-100" style="padding-top: 100%;"></a>
                </div>
                <!--- staff info --->
                <h3 class="mt-2">@username</h3>
                <small>[ role in the world ]</small>
              </div>
              <!--- end of staff --->
            </div>
          </div>
        </div>
        <div class="col-md-5 p-2 d-flex flex-column">
          <div class="card bg-faded border-0 p-md-3 p-2">
            <h3 class="text-capitalize mb-0">Events</h3>
            <hr class="w-100 my-2">
            <div class="overflow-auto" style="max-height: 300px;">
              <div class="row no-gutters">
                <!--- event --->
                <div class="col-md-4 col-11 p-1"><strong>Event Name</strong></div>
                <div class="col-1 p-1"><i class="fas fa-chevron-right" style="font-size: 8px;"></i></div>
                <div class="col-md-7 p-1">Event description</div>
                <!--- event --->
                <div class="col-md-4 col-11 p-1"><strong>Event Name</strong></div>
                <div class="col-1 p-1"><i class="fas fa-chevron-right" style="font-size: 8px;"></i></div>
                <div class="col-md-7 p-1">Event description</div>
                <!--- event --->
                <div class="col-md-4 col-11 p-1"><strong>Event Name</strong></div>
                <div class="col-1 p-1"><i class="fas fa-chevron-right" style="font-size: 8px;"></i></div>
                <div class="col-md-7 p-1">Event description</div>
                <!--- end of events --->
              </div>
            </div>
          </div>
          <!--- image --->
          <div class="card border-0 mt-3 h-100" style="background: url(IMGURL); background-size: cover; min-height: 100px;"></div>
        </div>
      </div>
    </div>
    <!--- rules tab --->
    <div class="tab-pane" id="TWO">
      <div class="row no-gutters">
        <div class="col-md-4 p-2">
          <!--- image --->
          <div class="card border-0 h-100" style="background: url(IMGURL); background-size: cover; min-height: 100px;"></div>
        </div>
        <div class="col-md-8 p-2">
          <div class="card bg-faded border-0 p-md-3 p-2">
            <h3 class="text-capitalize mb-0">species rules</h3>
            <hr class="w-100 my-2">
            <div class="overflow-auto" style="max-height: 400px;">
              <!--- species rules --->
              <ol style="list-style-type: upper-roman;">
                <li>content</li>
                <li>content</li>
                <ol style="list-style-type: lower-roman;">
                  <li>sub-content</li>
                  <li>sub-content</li>
                </ol>
                <li>content</li>
              </ol>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--- lore + traits tab --->
    <div class="tab-pane" id="THREE">
      <!--- traits sheet --->
      <img src="IMGURL" class="w-100">
      <!--- trait notes --->
      <div class="card bg-faded border-0 p-md-3 p-2 mt-3">
        <h3 class="text-capitalize mb-0">traits</h3>
        <hr class="w-100 my-2">
        <div class="overflow-auto" style="max-height: 150px;">
          <p>Pellentesque laoreet, libero non eleifend elementum, elit erat molestie dolor, vitae dapibus velit lacus quis nunc. Fusce tellus justo, posuere et augue ac, varius posuere nisi. Etiam at nibh arcu. Maecenas sem enim, ultricies ut quam quis, pulvinar faucibus libero. Donec pulvinar velit neque, euismod ultricies enim pulvinar ut. Maecenas id maximus nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus sapien ac sem viverra, at feugiat lectus rhoncus. Sed gravida rhoncus sapien, convallis molestie sem. Duis pretium sapien fermentum lacus egestas molestie sit amet ut eros. Nulla vitae porttitor eros. Phasellus molestie ipsum eget arcu suscipit, quis pretium ante iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed id erat accumsan, imperdiet arcu sed, fringilla eros.</p>
        </div>
      </div>
      <!--- lore --->
      <div class="card bg-faded border-0 p-md-3 p-2 mt-3">
        <h3 class="text-capitalize mb-0">lore</h3>
        <hr class="w-100 my-2">
        <div class="overflow-auto" style="max-height: 150px;">
          <p>Pellentesque laoreet, libero non eleifend elementum, elit erat molestie dolor, vitae dapibus velit lacus quis nunc. Fusce tellus justo, posuere et augue ac, varius posuere nisi. Etiam at nibh arcu. Maecenas sem enim, ultricies ut quam quis, pulvinar faucibus libero. Donec pulvinar velit neque, euismod ultricies enim pulvinar ut. Maecenas id maximus nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus sapien ac sem viverra, at feugiat lectus rhoncus. Sed gravida rhoncus sapien, convallis molestie sem. Duis pretium sapien fermentum lacus egestas molestie sit amet ut eros. Nulla vitae porttitor eros. Phasellus molestie ipsum eget arcu suscipit, quis pretium ante iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed id erat accumsan, imperdiet arcu sed, fringilla eros.</p>
        </div>
      </div>
    </div>
    <!--- shop tab --->
    <div class="tab-pane" id="FOUR">
      <div class="card bg-faded border-0 p-md-3 p-2">
        <h3 class="text-capitalize mb-0">MYO shop</h3>
        <hr class="w-100 my-2">
        <div class="row no-gutters">
          <div class="col-md-4 p-1">
            <h5>How to Purchase</h5>
            <p>Description of how to purchase tickets/link to the purchases forum/shop etc.</p>
          </div>
          <!--- ticket/item --->
          <div class="col-md-2 col-6 p-1 d-flex flex-column align-items-center">
            <!--- ticket picture --->
            <div class="rounded-circle w-100" style="background: url(IMGURL); background-size: cover; padding-top: 100%;"></div>
            <!--- ticket info --->
            <h3 class="mt-2">ticket name</h3>
            <small>[ $-- ]</small>
          </div>
          <!--- ticket/item --->
          <div class="col-md-2 col-6 p-1 d-flex flex-column align-items-center">
            <!--- ticket picture --->
            <div class="rounded-circle w-100" style="background: url(IMGURL); background-size: cover; padding-top: 100%;"></div>
            <!--- ticket info --->
            <h3 class="mt-2">ticket name</h3>
            <small>[ $-- ]</small>
          </div>
          <!--- ticket/item --->
          <div class="col-md-2 col-6 p-1 d-flex flex-column align-items-center">
            <!--- ticket picture --->
            <div class="rounded-circle w-100" style="background: url(IMGURL); background-size: cover; padding-top: 100%;"></div>
            <!--- ticket info --->
            <h3 class="mt-2">ticket name</h3>
            <small>[ $-- ]</small>
          </div>
          <!--- ticket/item --->
          <div class="col-md-2 col-6 p-1 d-flex flex-column align-items-center">
            <!--- ticket picture --->
            <div class="rounded-circle w-100" style="background: url(IMGURL); background-size: cover; padding-top: 100%;"></div>
            <!--- ticket info --->
            <h3 class="mt-2">ticket name</h3>
            <small>[ $-- ]</small>
          </div>
          <!--- end of tickets --->
        </div>
      </div>
      <div class="card bg-faded border-0 p-md-3 p-2 mt-3">
        <h3 class="text-capitalize mb-0">open adopts</h3>
        <hr class="w-100 my-2">
        <div class="row no-gutters">
          <!--- adopt --->
          <div class="col-md-2 col-6 p-1 d-flex flex-column align-items-center">
            <!--- adopt picture --->
            <div class="rounded-circle w-100" style="background: url(IMGURL); background-size: cover; padding-top: 100%;"></div>
            <!--- link to adopt/adopt name --->
            <h3 class="mt-2"><a href="LINK">adopt name</a></h3>
            <small>[ $-- ]</small>
          </div>
          <!--- adopt --->
          <div class="col-md-2 col-6 p-1 d-flex flex-column align-items-center">
            <!--- adopt picture --->
            <div class="rounded-circle w-100" style="background: url(IMGURL); background-size: cover; padding-top: 100%;"></div>
            <!--- link to adopt/adopt name --->
            <h3 class="mt-2"><a href="LINK">adopt name</a></h3>
            <small>[ $-- ]</small>
          </div>
          <!--- adopt --->
          <div class="col-md-2 col-6 p-1 d-flex flex-column align-items-center">
            <!--- adopt picture --->
            <div class="rounded-circle w-100" style="background: url(IMGURL); background-size: cover; padding-top: 100%;"></div>
            <!--- link to adopt/adopt name --->
            <h3 class="mt-2"><a href="LINK">adopt name</a></h3>
            <small>[ $-- ]</small>
          </div>
          <!--- adopt --->
          <div class="col-md-2 col-6 p-1 d-flex flex-column align-items-center">
            <!--- adopt picture --->
            <div class="rounded-circle w-100" style="background: url(IMGURL); background-size: cover; padding-top: 100%;"></div>
            <!--- link to adopt/adopt name --->
            <h3 class="mt-2"><a href="LINK">adopt name</a></h3>
            <small>[ $-- ]</small>
          </div>
          <!--- adopt --->
          <div class="col-md-2 col-6 p-1 d-flex flex-column align-items-center">
            <!--- adopt picture --->
            <div class="rounded-circle w-100" style="background: url(IMGURL); background-size: cover; padding-top: 100%;"></div>
            <!--- link to adopt/adopt name --->
            <h3 class="mt-2"><a href="LINK">adopt name</a></h3>
            <small>[ $-- ]</small>
          </div>
          <!--- adopt --->
          <div class="col-md-2 col-6 p-1 d-flex flex-column align-items-center">
            <!--- adopt picture --->
            <div class="rounded-circle w-100" style="background: url(IMGURL); background-size: cover; padding-top: 100%;"></div>
            <!--- link to adopt/adopt name --->
            <h3 class="mt-2"><a href="LINK">adopt name</a></h3>
            <small>[ $-- ]</small>
          </div>
          <!--- end of adopts --->
        </div>
      </div>
    </div>
  </div>
</div>