Stor8

<!---
==== Wumpus
==== HTML by 8byte
----
==== Colors
---- For easier changes, use Ctrl F and then
---- click the plus icon at the bottom to 
---- replace all.
====
#18191c - main background
#ffffff - highlight font
#b1b2b5 - main font
#01aaec - links
#292b2f - button
#6d7078 - button font
--->
<div class="container" style="max-width: 400px;">
  <!--- 
  ==== top banner
  ---- if you prefer discord's single color stripe, change:
  ==== url(IMGURL); background-size: cover; 
  ---- to 
  ==== #color; 
  ---- and 
  ==== height: 150px; 
  ---- to 
  ==== height: 75px; 
  --->
  <div class="card border-0" style="background:url(IMGURL); background-size: cover; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; height: 150px;"></div>
  <!--- info --->
  <div class="card border-0 px-3 pb-3" style="background:#18191c; color: #b1b2b5; border-top-left-radius: 0px; border-top-right-radius: 0px;">
    <!--- profile picture --->
    <div class="rounded-circle" style="background:url(IMGURL); border: 8px solid #18191c; background-size: cover; height: 100px; width: 100px; position: absolute; top: -50px;"></div>
    <div class="container" style="height: 75px;">
      <div class="pull-right">
        <!--- nitro --->
        <div class="mt-2" style="background:url(https://f2.toyhou.se/file/f2-toyhou-se/images/49566207_AXzNFT02DhrxkPk.gif); background-size: cover; height: 30px; width: 30px; margin-right: -15px;"></div>
      </div>
    </div>
    <!--- name + tag --->
    <h1 style="color: #ffffff; font-weight: bold">egg</h1>
    <h5>egg#4802</h5>
    <!--- status message --->
    <span class="my-4">Status message</span>
    <h5 style="font-weight: bold; text-transform: uppercase;">about me</h5>
    <!--- short description --->
    <span>You can write a short description here!</span>
    <!--- social media --->
    <ul class="list-unstyled">
      <li><a href="LINK" style="color:#01aaec;"> Twitter</a></li>
      <li><a href="LINK" style="color:#01aaec;"> Instagram</a></li>
      <li><a href="LINK" style="color:#01aaec;"> Tumblr</a></li>
    </ul>
    <!--- 
    ==== additional sections
    ---- you can easily add/remove the next few sections based on
    ---- you want to display on your profile
    --->
    <!--- playing a game --->
    <h5 style="font-weight: bold; text-transform: uppercase;">playing a game</h5>
    <div class="d-flex flex-row mb-3">
      <!--- game image --->
      <div style="background: url(IMGURL); background-size: cover; height: 50px; width: 50px;"></div>
      <div class="p-2">
        <!--- name + how long played --->
        <h4 class="mb-0" style="color: #ffffff; text-transform: uppercase;">Minecraft</h4>
        <span>for 1 hour</span>
      </div>
    </div>
    <!--- listening to spotify --->
    <h5 style="font-weight: bold; text-transform: uppercase;">listening to spotify</h5>
    <div class="text-right mt-n4 mb-1"><i class="fab fa-spotify fa-2x" style="color: #1db954;"></i></div>
    <div class="d-flex flex-row">
      <!--- album cover --->
      <div style="background: url(IMGURL); background-size: cover; height: 60px; width: 60px; border-radius: 10px;"></div>
      <div class="p-2">
        <!--- song title, artist, and album ---->
        <h4 class="mb-0"><a href="LINK" style="color: #ffffff;">Song Title</a></h4>
        <span>by <a href="LINK" style="color: #b1b2b5;">Song Artist</a> on <a href="LINK" style="color: #b1b2b5;">Album Name</a></span>
      </div>
    </div>
    <!--- break --->
    <hr style="background: #262729; margin-left: -15px; width: 368px;">
    <h5 style="font-weight: bold; text-transform: uppercase;">roles</h5>
    <!--- choose either legacy or updated version here --->
    <!--- "roles" LEGACY --->
    <div class="d-flex flex-row flex-wrap mb-4">
      <!--- you can change the colors of the "roles", make sure you change it in both places! --->
      <span class="badge badge-pill mx-1" style="background: transparent; border: 1px solid #5aeee6; color: #ffffff;"><i class="fas fa-circle" style="color:#5aeee6;"></i> prn/prn</span>
      <span class="badge badge-pill mx-1" style="background: transparent; border: 1px solid #e7c7f5; color: #ffffff;"><i class="fas fa-circle" style="color:#e7c7f5;"></i> Role</span>
    </div>
    <!--- "roles" UPDATED --->
    <div class="d-flex flex-row flex-wrap mb-4">
      <!--- you can change the colors of the "roles" --->
      <span class="badge p-2 mx-1" style="background: #292b2f;"><i class="fas fa-circle" style="color:#5aeee6;"></i> prn/prn</span>
      <span class="badge p-2 mx-1" style="background: #292b2f;"><i class="fas fa-circle" style="color:#e7c7f5;"></i> Role</span>
    </div>
    <!--- notes --->
    <h5 style="font-weight: bold; text-transform: uppercase;">note</h5>
    <span>Add a quote or even more information!</span>
    <!--- message for info --->
    <a class="btn w-100 mt-4 text-left" href="LINK" style="background:#292b2f; color: #6d7078;">Message @ egg</a>
  </div>
  <div class="text-right"><a class="tooltipster" title="code credits" href="/8byte" data-placement="bottom"><i class="fas fa-crow"></i></a></div>
</div>