Stor8

<!---
==== Mega Man code
==== HTML by 8byte
----
==== Colors
---- For easier changes, use Ctrl F and then
---- click the plus icon at the bottom to 
---- replace all.
====
#56b4e7 - lighter blue background
#217ec3 - darker blue background
#175984 - top box and bottom border
#e7e9ef - white text
#f1b725 - yellow bar
#203a3b - text
--->
<div class="mx-auto" style="max-width: 600px; font-family: Courier;">
  <div style="background: #56b4e7;">
    <div class="p-3">
      <!--- top box --->
      <div style="position: relative; padding: 5px;">
        <div style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: 20px solid transparent; border-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/78074109_ny0C3a807WI7iFo.png') 280 stretch;"></div>
        <div class="p-3" style="background: #175984;">
          <div class="p-2 mx-n3" style="background: #f1b725;">
            <!--- character name --->
            <h1 class="text-center text-uppercase font-weight-bold mb-0" style="color: #e7e9ef; text-shadow: 0 2px #203a3b, 2px 0 #203a3b, 0 -2px #203a3b, -2px 0 #203a3b;">Character Name</h1>
          </div>
          <!--- divider ---><div class="p-1"></div>
          <div class="flex-row flex-md-nowrap flex-wrap justify-content-center m-n2">
            <div class="flex-fill flex-column justify-content-between p-2">
              <!--- info --->
              <strong class="text-uppercase" style="font-size: 1.2rem;">
                <span class="mr-1" style="color: #56b4e7;">Number:</span>
                <span style="color: #e7e9ef;">DLN-001</span>
              </strong>
              <!--- info --->
              <strong class="text-uppercase" style="font-size: 1.2rem;">
                <span class="mr-1" style="color: #56b4e7;">Weapon:</span>
                <span style="color: #e7e9ef;">Mega Buster</span>
              </strong>
              <!--- info --->
              <strong class="text-uppercase" style="font-size: 1.2rem;">
                <span class="mr-1" style="color: #56b4e7;">Weakness:</span>
                <span style="color: #e7e9ef;">Spikes</span>
              </strong>
              <!--- end of info --->
            </div>
            <div class="p-2">
              <!--- icon --->
              <div style="background-image: url('IMGURL'); background-size: cover; width: 100px; height: 100px; border: 2px solid #203a3b;"></div>
            </div>
            <div class="p-2">
              <!--- icon --->
              <div style="background-image: url('IMGURL'); background-size: cover; width: 100px; height: 100px; border: 2px solid #203a3b;"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row no-gutters" style="position: relative;">
      <div class="col-md-6 p-2" style="position: relative; z-index: 1;">
        <!--- pagedoll --->
        <img src="IMGURL" style="min-height: 400px; object-fit: contain; object-position: center;" />
      </div>
      <div class="col-md-6 flex-column p-2" style="position: relative; z-index: 1;">
        <div class="text-center" style="color: #203a3b;">
          <!--- quote --->
          <h3 class="mb-0">"Cras dapibus cursus rutrum. Nullam pharetra turpis vitae ante pharetra, at ornare risus convallis."</h3>
        </div>
        <!--- divider ---><div class="flex-fill"></div>
        <!--- icon --->
        <div style="height: 125px; width: 125px; position: relative; " class="mx-auto">
          <!--- weapon image --->
          <div style="background-image: url('IMGURL'); background-size: cover; position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: 2;"></div>
          <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; border: 3px solid #203a3b; background-color: #e7e9ef; z-index: 1;"></div>
        </div>
        <h5 class="text-center text-uppercase mt-1" style="color: #203a3b;">Weapon Copy</h5>
      </div>
      <div class="col-12" style="height: 30px;"></div>
      <!--- decoration --->
      <div style="position: absolute; width: 100%; left: 0; bottom: 0; z-index: 0;">
        <div style="background: #217ec3; height: 10px;"></div>
        <div style="height: 10px;"></div>
        <div style="background: #217ec3; height: 200px;"></div>
        <div style="height: 10px;"></div>
        <div style="background: #217ec3; height: 10px;"></div>
      </div>
    </div>
    <div class="p-3" style="color: #203a3b;">
      <!--- info --->
      <p>Cras dapibus cursus rutrum. Nullam pharetra turpis vitae ante pharetra, at ornare risus convallis. Phasellus non urna blandit, dignissim tellus nec, pulvinar neque. Curabitur neque eros, tristique egestas auctor vitae, tristique nec enim. Phasellus interdum porta lorem eget hendrerit. Sed vel facilisis mauris. Mauris pellentesque urna quam, vitae porttitor tellus accumsan sit amet. Nam eleifend elit in nibh porta, ut egestas quam finibus. Integer auctor risus non dolor accumsan, quis fermentum elit feugiat. Morbi sagittis molestie nisi quis blandit. Sed efficitur erat ac leo interdum porta. Phasellus at scelerisque nibh.</p>
    </div>
    <!--- divider --->
    <div>
      <div style="background: #010002; height: 3px;"></div>
      <div style="background: #3aade9; height: 3px;"></div>
      <div style="background: #fdffff; height: 3px;"></div>
      <div style="background: #3aade9; height: 3px;"></div>
      <div style="background: #0088cc; height: 3px;"></div>
      <div style="background: #010002; height: 3px;"></div>
    </div>
    <div class="p-2 text-right" style="background: #175984;">
      <strong><a href="/8byte" style="color: #e7e9ef;">code credits</a></strong>
    </div>
  </div>
</div>