Stor8

<!---
==== Usagi
==== HTML by 8byte
----
==== Accent
---- For easier changes, use Ctrl F and then
---- click the plus icon at the bottom to 
---- replace all.
====
#ffffcc - accent one
#ffc5c4 - accent two
#493843 - button color
--->
<div class="container p-0 text-center" style="max-width: 300px;">
  <!--- crescent moon --->
  <div class="container justify-content-center" style="background: linear-gradient(to bottom right, #ffffcc 0%, #ffc5c4 100%); border-radius: 50%; height: 300px; width: 300px;">
    <!--- circle --->
    <div class="card border-0" style="border-radius: 50%; height: 235px; width: 235px;">
      <div class="tab-content">
        <!--- about --->
        <div class="tab-pane p-4" data-toggle="tab" id="LEFT">
          <h1 class="text-muted">About</h1>
          <div class="container overflow-auto mb-3" style="height: 125px;">
            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>
          <i class="fas fa-stars"></i>
        </div>
        <!--- the basics --->
        <div class="tab-pane active p-4" data-toggle="tab" id="CENTER">
          <h1 class="text-muted">Name</h1>
          <!--- profile picture --->
          <div class="card mx-auto rounded-circle border-0" style="background:url(IMGURL); background-size:cover; height: 100px; width: 100px;"></div>
          <!--- you can change these to be age . prn . etc --->
          <p class="font-italic text-muted mb-3">adj . adj . adj</p>
          <i class="fas fa-moon"></i>
        </div>
        <!--- links --->
        <div class="tab-pane p-4" data-toggle="tab" id="RIGHT">
          <h1 class="text-muted">Links</h1>
          <!--- links --->
          <p class="mt-auto mb-3 d-flex flex-column" style="height: 125px; justify-content: space-around;">
            <!--- row 1 --->
            <span>
              <a class="m-1" href="LINK"><i class="fab fa-instagram fa-fw fa-2x"></i></a>
              <a class="m-1" href="LINK"><i class="fab fa-twitter fa-fw fa-2x"></i></a>
              <a class="m-1" href="LINK"><i class="fab fa-deviantart fa-fw fa-2x"></i></a>
            </span>
            <!--- row 2 --->
            <span>
              <a class="m-1" href="LINK"><i class="fab fa-tumblr fa-fw fa-2x"></i></a>
              <a class="m-1" href="LINK"><i class="fas fa-paw fa-fw fa-2x"></i></a> 
              <a class="m-1 tooltipster text-primary" title="username#0000"><i class="fab fa-discord fa-2x"></i></a>
            </span>
          </p>
          <i class="fas fa-clouds"></i>
        </div>
      </div>
    </div>
  </div>
  <!--- buttons --->
  <ul class="nav d-flex" style="justify-content: space-around;">
    <li class="nav-item mt-n3">
      <a class="nav-link btn border-0 align-items-center" data-toggle="tab" href="#LEFT" style="background:linear-gradient(to bottom right, #ffffcc 0%, #ffc5c4 100%); color:#493843; border-radius: 50%; height: 50px; width: 50px;">
        <!--- you can change the button icon here --->
        <i class="fas fa-stars fa-lg"></i>
      </a>
    </li>
    <li class="nav-item my-3">
      <a class="nav-link active btn border-0 align-items-center" data-toggle="tab" href="#CENTER" style="background:linear-gradient(to bottom right, #ffffcc 0%, #ffc5c4 100%); color: #493843; border-radius: 50%; height: 50px; width: 50px;">
        <!--- you can change the button icon here --->
        <i class="fas fa-moon fa-lg"></i>
      </a>
    </li>
    <li class="nav-item mt-n3">
      <a class="nav-link btn border-0 align-items-center" data-toggle="tab" href="#RIGHT" style="background:linear-gradient(to bottom right, #ffffcc 0%, #ffc5c4 100%); color: #493843; border-radius: 50%; height: 50px; width: 50px;">
        <!--- you can change the button icon here --->
        <i class="fas fa-clouds fa-lg"></i>
      </a>        
    </li>
  </ul>
  <div><a href="/8byte" class="tooltipster" title="code credits" data-placement="bottom"><i class="fas fa-crow"></i></a></div>
</div>